CODEWITHSUNDEEP
javascriptreactjsecmascript-6
kurtko
kurtko

Reputation: 2126

React: Map multidimensional array with different keys

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'
                    }
                  ]
            }
          ];

Upvotes: 2

Views: 9356

Answers (4)

Veljo Lasn
Veljo Lasn

Reputation: 246

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.

Upvotes: 0

omri_saadon
omri_saadon

Reputation: 10631

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

Upvotes: 0

kind user
kind user

Reputation: 41893

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.

Upvotes: 4

CD-jS
CD-jS

Reputation: 1119

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.

Upvotes: 0

Related Questions