React: Map multidimensional array with different keys

Question

How could I map a multidimensional array with differents keys? This is a example array similar: (my original array is obtained from ajax and PHP mysql query that's why I need to do this):

var products = [
        {
            id: 1,
            name: 'John',
            phones: {
                sony:
                {
                  brand: 'sony',
                  model: 'z3'
                },
                samsung:
                {
                  brand: 'samsung',
                  model: 's7'
                }
              }

        },
        {
            id: 2,
            name: 'Mike',
            phones: {
                sony:
                {
                  brand: 'sony',
                  model: 'z1'
                },
                nokia:
                {
                  brand: 'nokia',
                  model: 'n8'
                }
              }

        }
      ];

If I try to map this array I get: 'Uncaught TypeError: product.phones.map is not a function':

const List = ({ products, addToCart }) => { 

  return (
    <div className="odds-3">
      <div className="odds">

        {products.map((product, index) =>
          <div key={index}>
            <p>{product.id} - {product.name}</p>
            <ul>
              {product.phones.map((phone, index) =>

                <li key={index}>{phone.brand} - {phone.model}</li>

              )}
            </ul>
          </div>
        )}
      </div>
    </div>
  );

}

With this array (without phones keys), works fine:

 var products = [
            {
                id: 1,
                name: 'John',
                phones:
                    [{
                      brand: 'sony',
                      model: 'z3'
                    },
                    {
                      brand: 'samsung',
                      model: 's7'
                    }
                  ]
            },
            {
                id: 2,
                name: 'Mike',
                phones:
                    [{
                      brand: 'sony',
                      model: 'z1'
                    },
                    {
                      brand: 'nokia',
                      model: 'n8'
                    }
                  ]
            }
          ];

kind user · Accepted Answer · 2017-10-31 13:14:27Z

4

products isn't an array so the map function won't work. Try

{Object.keys(product.phones).map((phone, index) =>
 <li key={index}>{product.phones[phone].brand} - {product.phones[phone].model}</li>
)}

instead.

edited Oct 31, 2017 at 13:14

answered Oct 31, 2017 at 13:08

kind user

42k8 gold badges69 silver badges78 bronze badges

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

Comments

CD-jS · Accepted Answer · 2017-10-31 13:09:05Z

0

In your first example, the phones property is an object not an array and therefore does not have the map function

The second one works phones is an array.

edited Oct 31, 2017 at 13:09

answered Oct 31, 2017 at 13:06

CD-jS

1,1191 gold badge15 silver badges33 bronze badges

2 Comments

kurtko Over a year ago

and how could I go through the array?

CD-jS Over a year ago

Well if phones can be an array then keep at as that and you're good to go. Otherwise you can loop over the keys in the object using the answer from @kind-user

omri_saadon · Accepted Answer · 2017-10-31 13:15:22Z

0

As others before me told you, products isn't an array and therefore you can't use the map function on it.

Although, you can use the map function from lodash library which you can use in order to iterate over an object keys/values:

import map from 'lodash'
{map(product, (value, key) =>
 ...
)}

For more info, read here

answered Oct 31, 2017 at 13:15

omri_saadon

10.7k8 gold badges36 silver badges58 bronze badges

1 Comment

kurtko Over a year ago

very interesting!

Veljo Lasn · Accepted Answer · 2017-10-31 13:15:47Z

0

Arrays work slightly differently in JavaScript. In your case, a drop-in fix would be iterating over the values of the object, something like this:

{products.map((product, index) =>
    <div key={index}>
        <p>{product.id} - {product.name}</p>
        <ul>
            {Object.values(product.phones).map((phone, index) =>
            <li key={index}>{phone.brand} - {phone.model}</li>
            )}
        </ul>
    </div>
)}

While some browsers still lack support for Object.values(), the transpilation step should take care of this.

Note that it is generally not advisable to use indices as keys, as you might get weird rendering bugs should the ordering or the contents of your iterables change.

answered Oct 31, 2017 at 13:15

Veljo Lasn

2461 silver badge4 bronze badges

Collectives™ on Stack Overflow

React: Map multidimensional array with different keys

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related