avoid empty arrays in JavaScript

Question

I have this code

let defCores = el.histories;
let cores = [];
for(let i = 0; i < defCores.length; i++){
    cores.push({
        new_core: defCores[i].new_core.name,
        new_color: defCores[i].new_core.color,
        old_core: defCores[i].old_core.name,
        old_color: defCores[i].old_core.color,
    })
}

// using `cores` in my template to show (append data)
let myCores = '';
cores.forEach(core => {
    myCores += ""+
    ""+
    "" + core.old_core + ""+
    " "+
    "" + core.new_core + ""+
    ""+
    "";
});

But my data some have let defCores = el.histories; array some are empty. like:

Because of this I get this error:

Uncaught (in promise) TypeError: Cannot read property 'name' of null

which comes from this line: new_core: defCores[i].new_core.name,

Now I'm seeking for solution to avoid this error and if my histories array have value return it if not just ignore it (show nothing)

PS: I thought for(let i = 0; i < defCores.length; i++){ would prevent such issue on empty histories but apparently not!

Any idea?

user_8425297 · Answer

You can try this by binding the key in the object conditionally

let defCores = el.histories;
let cores = [];
for (let i = 0; i < defCores.length; i++) {
    let obj = {
        ... (defCores[i] && defCores[i].new_core.name && { new_core: defCores[i].new_core.name }),
        ... (defCores[i] && defCores[i].new_core.color && { new_color: defCores[i].new_core.color }),
        ... (defCores[i] && defCores[i].old_core.name && { old_core: defCores[i].old_core.name }),
        ... (defCores[i] && defCores[i].old_core.color && { old_color: defCores[i].old_core.color })
    }
    if (obj && Object.keys(obj).length) {
        cores.push(obj)
    }

}

user_2919438 · Answer

I think adding an if check for your code should work.

let defCores = el.histories;

if (defCores && defCores.length) {
  let cores = [];

  for(let i = 0; i < defCores.length; i++){
    ...
  }

  let myCores = '';
  cores.forEach(core => {
    ...
  });
}

user_8646861 · Answer

just add an empty array check:

for(let i = 0; i < defCores.length; i++){
  if(defCores[i].new_core.name) {
    cores.push({
      new_core: defCores[i].new_core.name,
      new_color: defCores[i].new_core.color,
      old_core: defCores[i].old_core.name,
      old_color: defCores[i].old_core.color,
    })
  }
}

avoid empty arrays in JavaScript

3 Answers