I have an external data source that sometimes returns a value of null, i do not have access to this data source so i cannot change it. My Angular 2 app crashes on a undefined or null value when trying to display the data. I am trying to create a function that catches null or undefined values and sets them to an empty string.

I have found examples for symmetrical JSON structures, but not non-symmetrical nested loop structures

// JSON ARRAY EXAMPLE 
[
 {
  "a":"1",
  "x":null,
  "y":[
       {"k": "3"},
       {"i": "5"}
   ]
 },
 {
  "a":"1",
  "x":"2",
  "y":[
       {"k": "3"},
       {"i": "5"},
       {"z": "4"},
       {"p": null}
   ]
 },
 {
  "a":null,
  "x":"2"
 }
]

Current checking function not working

//Checking passes in JSON array
checkData(dataSet) {
  dataSet.forEach(function(obj) {
    console.log("checking data");
     if(!obj || obj === null){
       return "";
     }
     else{
       return obj;
     }
  });
}

I have an external data source that sometimes returns a value of null, i do not have access to this data source so i cannot change it. My Angular 2 app crashes on a undefined or null value when trying to display the data. I am trying to create a function that catches null or undefined values and sets them to an empty string.

I have found examples for symmetrical JSON structures, but not non-symmetrical nested loop structures

// JSON ARRAY EXAMPLE 
[
 {
  "a":"1",
  "x":null,
  "y":[
       {"k": "3"},
       {"i": "5"}
   ]
 },
 {
  "a":"1",
  "x":"2",
  "y":[
       {"k": "3"},
       {"i": "5"},
       {"z": "4"},
       {"p": null}
   ]
 },
 {
  "a":null,
  "x":"2"
 }
]

Current checking function not working

//Checking passes in JSON array
checkData(dataSet) {
  dataSet.forEach(function(obj) {
    console.log("checking data");
     if(!obj || obj === null){
       return "";
     }
     else{
       return obj;
     }
  });
}

• javascript
• angularjs
• json

Share Improve this question Follow edited Nov 28, 2016 at 4:59 Paddy asked Nov 28, 2016 at 4:39 PaddyPaddy 80322 gold badges1212 silver badges2929 bronze badges 4

• I am trying to create a function that catches null or undefined values and sets them to an empty string Do you mean to change the value in the array? Better will be if you just put a check in your function – brk Commented Nov 28, 2016 at 4:47
• 2 The example you showed doesn't have any null values, it only has some properties that are strings containing the word "null". Regarding your JS function, the return value from a .forEach() callback doesn't do anything, plus you need to use the obj argument within the function, not dataSet. And presumably the function would need to be recursive to handle nested arrays/objects. – nnnnnn Commented Nov 28, 2016 at 4:50
• @user2181397 I do mean to change all the values that are either null or undefined to an empty String – Paddy Commented Nov 28, 2016 at 5:00
• @nnnnnn updated the example. and function still returning null and crashing. – Paddy Commented Nov 28, 2016 at 5:03

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

This is a function that will recursively test/replace every property in a JSON hierarchy:

function process(obj) {
  for (var i in obj) {
    var child = obj[i];
    if (child === null)
      obj[i] = "";
    else if (typeof(child)=="object")
      process(child);
  }
}

// try it out with your sample data
var data = [
 {
  "a":"1",
  "x":null,
  "y":[
       {"k": "3"},
       {"i": "5"}
   ]
 },
 {
  "a":"1",
  "x":"2",
  "y":[
       {"k": "3"},
       {"i": "5"},
       {"z": "4"},
       {"p": null}
   ]
 },
 {
  "a":null,
  "x":"2"
 }
];
process(data);
console.log(data);

An alternative method:

const newData = JSON.parse(JSON.stringify(testData, (key, value) =>
  value === null || value === undefined
    ? ''    // return empty string for null or undefined
    : value // return everything else unchanged
));

Here's a function that recursively modifies the object or array passed to it:

// helper function to loop over array elements OR object properties
function iterator(cb, obj) {
  if (Array.isArray(obj))
    obj.forEach(cb);
  else
    Object.keys(obj).forEach(function(k) { cb(obj[k], k, obj); });
}

function replaceNulls(obj) {
  iterator(function(v, k, o) {
    if (v == null)
      o[k] = "";
    else if (typeof v === "object")
      replaceNulls(v);
  }, obj);
}

var input = [
 {
  "a":"1",
  "x":null,
  "y":[
       {"k": "3"},
       {"i": "5"},
       null
   ]
 },
 null,
 {
  "a":"1",
  "x":"2",
  "y":[
       {"k": "3"},
       {"i": "5"},
       {"z": "4"},
       {"p": null}
   ]
 },
 {
  "a":null,
  "x":"2"
 }
];
replaceNulls(input);
console.log(input);

Note that testing for null using == will also match undefined values. If you wanted to test for null but not undefined just use === instead.