Empty array in an array of arrays is skipped?

Question

I have stumbled upon a case I have never had before. I have an array of arrays and each array has several objects inside or nothing inside.

I use the objects to generate some HTML and all works well except when I try to handle the empty data (an array that has no objects inside). I was thinking to loop through them and if I get an array that is empty to create specific HTML but I just can't seem to handle it... maybe it sounds confusing when I explain like this, so I will leave the code snippet talk for itself

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')
for(let i = 0; i < theGrandArray.length; i++ ){
  for(let k = 0; k < theGrandArray[i].length; k++){
    if(!theGrandArray[i][k].id){
      console.log('ahaaa!')
    }
    let liElement = document.createElement('li')
    liElement.innerText = theGrandArray[i][k].id
    theUl.appendChild(liElement)
  }
}

<ul id="theUl"></ul>

It's not clear what the issue is; if you want to handle an empty nested array check for its length, if 0 do one thing, of > 0 do what you're doing now (or whatever it is you need to do). — Dave Newton
– Dave Newton, Commented Apr 5, 2021 at 15:59
It doesn't work because k < theGrandArray[i].length is always false with the empty array. theGrandArray[i].length is 0 and 0 < 0 is false. — evolutionxbox
– evolutionxbox, Commented Apr 5, 2021 at 16:02
Just a suggestion, using a forEach loop might help you see more clearly and debug accordingly — Anurag Srivastava
– Anurag Srivastava, Commented Apr 5, 2021 at 16:07

yuvin · Accepted Answer · 2021-04-05 16:06:07Z

1

Did you try to debug it? Chrome Dev Tools might come in handy. Your innermost for code will never execute for the empty sub-array, because theGrandArray[2].length is zero. To handle that case you want to add e.g. an if before that for:

if (theGrandArray[i].length === 0) { 
  /* special case */
} else {
  for (/* ... */)
}

answered Apr 5, 2021 at 16:06

yuvin

3831 silver badge12 bronze badges

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

2 Comments

Kolyo Peev Over a year ago

Silly me, guess my brain has really melted after 8 hours of work on monday =D

yuvin Over a year ago

Yes, sometimes all you need is a fresh look :D

tao · Accepted Answer · 2021-04-05 16:24:41Z

You could use .forEach() on the parent array and .map() on the inner ones:

theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.map(el => el.id).join(', ')
  theUl.appendChild(li);
})

See it here:

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')
theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.map(el => el.id).join(', ')
  theUl.appendChild(li);
})

<ul id="theUl"></ul>

If you want to provide some fallback content when there are no items, you could check the inner array's length:

theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.length
    ? arr.map(el => el.id).join(', ')
    : 'No data...';
  theUl.appendChild(li);
})

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')
theGrandArray.forEach(arr => {
  const li = document.createElement('li');
  li.innerText = arr.length
    ? arr.map(el => el.id).join(', ')
    : 'No data...';
  theUl.appendChild(li);
})

<ul id="theUl"></ul>

Charlie · Accepted Answer · 2021-04-05 16:17:17Z

All you need is an IF condition to decide what to do when you encounter an empty array:

const theGrandArray = [
  [
    {id:1},
    {id:12},
    {id:13}
  ],
  [
    {id:2},
    {id:22},
    {id:23}
  ],
  [], // this is the array I want to handle
  [
    {id:4},
    {id:42},
    {id:43}
  ]
]
const theUl = document.getElementById('theUl')

for(let i = 0; i < theGrandArray.length; i++ ){
  
  if (theGrandArray[i].length !== 0){
    for(let k = 0; k < theGrandArray[i].length; k++){
      if(!theGrandArray[i][k].id){
        console.log('ahaaa!')
      }
      let liElement = document.createElement('li')
      liElement.innerText = theGrandArray[i][k].id
      theUl.appendChild(liElement)
    }
  }
  else {
      let liElement = document.createElement('li')
      liElement.innerText = '---- no data ----';
      theUl.appendChild(liElement)
  }
     
  
  
  
}

<ul id="theUl"></ul>

Collectives™ on Stack Overflow

Empty array in an array of arrays is skipped?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related