Mapping through array with undefined fields

Question

I am implementing a hash table, where obviously some fields are left undefined, because they have not yet been filled.

I also want to display every field of the hash table. However, when I map through the array the function only returns divs for fields that are not undefined, cant figure out how to force map function to display Empty for undefined fields.

It looks like that for now:

const displayTable = () => {
  return storage.map(item => {
    if (item == null) {
      return <div>undefined</div>
    }
    return (
      <div>
        <p>{item[0][0]}</p>
      </div>
    );
  });

With storage being [undefined, undefined, undefined, Array[1], undefined, Array[1], undefined, undefined, undefined, Array[1]]

Thus I end up with only three rendered divs.

There is confusion in the answers stemming from what appears to be a misunderstanding that you didn't actually set the undefined values yourself. Instead, it seems the storage array is "holey", that is the undefined values represent indexes that were never assigned a value. This would be a useful bit of information to include in the question. — Caleb Miller
– Caleb Miller, Commented May 3, 2018 at 17:41
I trusted the console.log stating, that fields are undefined. My beginners knowledge wasnt enough to know that such holes are possible in arrays. — MazMat
– MazMat, Commented May 3, 2018 at 17:46

Lennholm · Accepted Answer · 2018-05-03 17:50:59Z

3

In Javascript, undefined and not defined are not the same things, although trying to access a non-defined property of an object will return the value undefined. Considering JS also has null, this is in my opinion one of the messiest things about JS.

You could solve your issue by filling your array before starting to populate it:

storage.fill(null)

(Note that storage.fill(undefined) would also work! Isn't Javascript wonderful? :p)

Of course, this will only work if the array has a static, known length. If the length is dynamic, you'll have to do something like this:

const displayTable = () => {
  const rendered = [];
  for (let i = 0; i < storage.length; i++) {
    if (storage[i] == null) {
      rendered.push(<div>undefined</div>);
    } else {
      rendered.push(
        <div>
          <p>{storage[i][0][0]}</p>
        </div>
      );
    }
  }
  return rendered;
}

edited May 3, 2018 at 17:50

answered May 3, 2018 at 17:18

Lennholm

7,5301 gold badge23 silver badges32 bronze badges

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

6 Comments

Caleb Miller Over a year ago

This is the correct answer. The "holey" array is the root of the problem, and this answer is the only one addressing that.

MazMat Over a year ago

It might work, I just need to rework my hashing table to fill the array in a proper way that wont interfere with hashing the actual values.

Lennholm Over a year ago

@MazMat My second example should be a safe bet and work the same way you intended your original code to work, just in a non-functional and much less nice way, regardless of how you work with your storage array.

MazMat Over a year ago

Made it work, I used regular for loop to iterate through the array after hashing and set all "empty" fields to null and now it works. Thank you!

Lennholm Over a year ago

@HMR Yeah, I saw your answer. Really cool, didn't know Array.from() actually fills empty indices.

|

Anthony · Accepted Answer · 2018-05-03 17:49:09Z

1

If the array is actually populated with undefined, you could do:

const displayTable = () => {
  return storage.map(item => {
    if(!item) {
      return <div> undefined </div>
    }
    return (
      <div>
        <p>{item[0][0]}</p>
      </div>
    );
  });

A fiddle with a working demonstration

NB. The example uses ternary but is functionally the same as above

But based on an example provided by the OP, this is not the case and the elements they are expecting to be undefined are actually empty i.e. there is nothing to invoke the .map() predicate on.

edited May 3, 2018 at 17:49

answered May 3, 2018 at 17:11

Anthony

6,5122 gold badges20 silver badges36 bronze badges

7 Comments

MazMat Over a year ago

Tried undefined, null, I alsot ried your !item, the behaviour doesnt change.

Anthony Over a year ago

something must be weird about your storage array then; using it as you listed I get return values

Caleb Miller Over a year ago

null === undefined is indeed false, but OP didn't use strict equality. null == undefined is actually true.

MazMat Over a year ago

Funny enough, your code works while mine doesnt. Would you mind taking look at my example? codesandbox.io/s/6l104zmzpz

Lennholm Over a year ago

The fiddle in this answer works because it explicitly populates the array with the value undefined. The OP's code is using sparse arrays that has empty indices, which is not the same thing as undefined. This answer is incorrect. The equality of null and undefined has nothing to do with the problem.

|

HMR · Accepted Answer · 2018-05-03 17:58:22Z

1

You can use Array.from or spread operator if you have sparse arrays:

[1,2].concat(new Array(1)).forEach(x=>console.log("Only for 1 and 2:",x));
[1,2].concat([...new Array(1)]).forEach(x=>console.log("1, 2 and undefined:",x));//with spread operator
[1,2].concat(Array.from(new Array(1))).forEach(x=>console.log("1, 2 and undefined:",x));//with Array.from

answered May 3, 2018 at 17:58

HMR

39.5k26 gold badges99 silver badges176 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2018-05-03 18:03:05Z

0

For your actual solution I'd do just like below:

const displayTable = () => {
  return storage.map(item => {
    return (
      <div>
        {typeof item !== 'undefined' ? `<p>${item[0][0]}</p>` : 'Undefined'}
        Or just item to check, if it is defined
        {item ? `<p>${item[0][0]}</p>` : 'Undefined'} 
      </div>
    );
  });

A little bit different, though this might be helpful for others :)

const filteredStorage = storage.filter(item => item !== undefined);
const blankStorage = storage.filter(item => item === undefined);
const displayTable = () => {
  return (
   <div>
    <div>Undefined only</div>
    {
      blankStorage.map(item => {
        return <div>undefined</div>
      })
    }
    <div>Defined only</div>
    {
      filteredStorage.map(item => {
        return <div><p>{item[0][0]}</p></div>
      })
    }
  </div>
 )
}

edited May 3, 2018 at 18:03

answered May 3, 2018 at 17:38

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

2 Comments

Lennholm Over a year ago

.filter() behaves the same way so this won't work. Also, your return statement isn't even valid JS.

Caleb Miller Over a year ago

Not only is this not valid JS, but is proposes rendering values in a different order than that of the storage array. Not a helpful solution.

Collectives™ on Stack Overflow

Mapping through array with undefined fields

4 Answers 4

6 Comments

7 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

7 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related