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 += "<div style='width: 100%; display: inline-block; clear:both; margin-bottom: 5px;'>"+
    "<div class='coreColor' style='display: inline-block; width: 20px; height: 15px; background: "+core.old_color+";'></div>"+
    "<div class='coreName' style='margin-left: 5px; display: inline-block; width: 25%;'>" + core.old_core + "</div>"+
    "<div class='coreName' style='display: inline-block;'><i style='color: red;' class='fas fa-arrow-right'></i> <i style='color: seagreen;' class='fas fa-arrow-left'></i></div>"+
    "<div class='coreName' style='margin-left: 5px; display: inline-block; width: 25%;'>" + core.new_core + "</div>"+
    "<div class='coreColor' style='width: 20px; display: inline-block; height: 15px; background: "+core.new_color+";'></div>"+
    "</div>";
});

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?

The error doesn't appear to be caused by the empty arrays. The problem seems to be that some of the array entries have a new_core value of null and you can't read the name property of a null. — skirtle
– skirtle, Commented May 14, 2020 at 4:38
Add a ? to the end of the property, like defCores[i[?.new_core?.name This will is a newer JS operator that only "goes on" to the next selector if the current one doesn't return undefined — VirxEC
– VirxEC, Commented May 14, 2020 at 4:38

Narendra Chouhan · Accepted Answer · 2020-05-14 04:43:12Z

5

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)
    }

}

answered May 14, 2020 at 4:43

Narendra Chouhan

2,3091 gold badge17 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mafortis Over a year ago

still says Uncaught (in promise) TypeError: Cannot read property 'name' of null on var obj = _objectSpread({}, defCores[i] && defCores[i].new_core.name && {

mafortis Over a year ago

I went and check database two of my histories didn't have value for old_core, new_core therefore error was because of them :/ and your code is working.

Narendra Chouhan Over a year ago

great @mafortis

Vaibhav Nigam · Accepted Answer · 2020-05-14 04:39:12Z

0

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 => {
    ...
  });
}

answered May 14, 2020 at 4:39

Vaibhav Nigam

1,4971 gold badge14 silver badges23 bronze badges

Comments

Mishel Tanvir Habib · Accepted Answer · 2020-05-14 04:46:17Z

0

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,
    })
  }
}

edited May 14, 2020 at 4:46

answered May 14, 2020 at 4:39

Mishel Tanvir Habib

1,15211 silver badges16 bronze badges

2 Comments

mafortis Over a year ago

this hides all my histories even those which has data

Mishel Tanvir Habib Over a year ago

Now if check is even more specific. Try this brother. Let us know whether its working or not.

Collectives™ on Stack Overflow

avoid empty arrays in JavaScript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related