javascript - React: Map multidimensional array with different keys - Stack Overflow

admin管理员组

文章数量:1401365

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

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

• javascript
• reactjs
• ecmascript-6

Share Improve this question Follow asked Oct 31, 2017 at 13:04 kurtkokurtko 2,13644 gold badges3333 silver badges4949 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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.

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

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.

本文标签： javascriptReact Map multidimensional array with different keysStack Overflow