ReactJS map through Object

Question

I have a response like this:

I want to display the name of each object inside this HTML:

{subjects.map((item, i) => (
  


        

Answer 1

When calling Object.keys it returns a array of the object's keys.

Object.keys({ test: '', test2: ''}) // ['test', 'test2']

When you call Array#map the function you pass will give you 2 arguments;

1. the item in the array,
2. the index of the item.

When you want to get the data, you need to use item (or in the example below keyName) instead of i

{Object.keys(subjects).map((keyName, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">key: {i} Name: {subjects[keyName]}</span>
    </li>
))}

Answer 2

Also you can use Lodash to direct convert object to array:

_.toArray({0:{a:4},1:{a:6},2:{a:5}})
[{a:4},{a:6},{a:5}]

In your case:

_.toArray(subjects).map((subject, i) => (
    <li className="travelcompany-input" key={i}>
        <span className="input-label">Name: {subject[name]}</span>
    </li>
))}