Map showing the keys, not only the values

Question

If I have this object:

const json = {
  products: [
    {
      id: 0,
      name: "Chair Roby",
      style: "Leather",
      color: "red",
    }
  ]
};

I can map over the array inside of it and show all the items in the object inside the array like this:

const prod = json.products.map(item => {
  return (
      <ul>
        <li>
          {item.name}
        </li>
        <li>
          {item.style}
        </li>
         <li>
          {item.color}
        </li>
      </ul>
  );
});

This listed me the values, but how could I show also the keys such as name, style and color?

For example in the property color: "red". Key is color and value is red. How can I access the color? — user1941537, Mar 03 '19 at 00:49
Use [`Object.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys). — Etheryte, Mar 03 '19 at 00:49
Possible duplicate of [Get array of object's keys](https://stackoverflow.com/questions/8763125/get-array-of-objects-keys) — Etheryte, Mar 03 '19 at 00:50

score 2 · Accepted Answer · answered Mar 03 '19 at 00:54

Use another nested map over the Object.entries of each item:

const json = {
  products: [
    {
      id: 0,
      name: "Chair Roby",
      style: "Leather",
      color: "red",
    },
    {
      foo: 'bar'
    }
  ]
};

class MyList extends React.Component {
  render() {
    return json.products.map((obj) => (
      <ul>
        { 
          Object.entries(obj).map(([key, val]) => (
            <li>
              {('key: ' + key +  ', val: ' + val)}
            </li>
          ))
        }
      </ul>
    ));
  }
}
ReactDOM.render(
  <MyList />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>

score 2 · Answer 2 · answered Mar 03 '19 at 00:58

2

The best aproach is this:

const prod = Object.keys(json.products).forEach(productKey => { return ( <ul> <li> {productKey} - {json.products[productKey]} </li> </ul> ); });

answered Mar 03 '19 at 00:58

rfschroeder

380
2
10

But `forEach` returns `undefined`, the JSX you've calculated there gets discarded – CertainPerformance Mar 03 '19 at 01:03

score 1 · Answer 3 · answered Mar 03 '19 at 00:52

1

Try this

 Object.keys(json).map(Followed by necessary code)

answered Mar 03 '19 at 00:52

Shravani

1,622
2
11
16

score 1 · Answer 4 · answered Mar 03 '19 at 01:04

1

const prod = json.products.map(item =>
      <ul>
          {Object.entries(item).map((key, value) =>
             <li>{key}: {value}</li>
          }
      </ul>
);

answered Mar 03 '19 at 01:04

Markus

1,598
2
13
32

Map showing the keys, not only the values

4 Answers4