How can I map through an object in ReactJS?

Question

I have a response like this:

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

{subjects.map((item, i) => (
  <li className="travelcompany-input" key={i}>
    <span className="input-label">{ item.name }</span>
  </li>
))}

But it throws an error of subjects.map is not a function.

First, I have to define the keys of the objects where it creates an array of keys, where I want to loop through and show the subject.names.

What I also tried is this:

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

A word of **caution** here.The order of keys is not gauranteed in an object and if something else modifies the object it may return the keys in a different order.This may result in content shifting around. — ninjaas, Oct 26 '19 at 11:37

TryingToImprove · Accepted Answer · 2020-08-05T12:30:28.150

149

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;

the item in the array,
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>
))}

edited Aug 05 '20 at 12:30

answered Nov 25 '16 at 11:47

TryingToImprove

7,047
4
30
39

and to map through another field array – Isaque Palmieri Feb 17 '21 at 18:41
Is there a reason not to use Object.values instead? – MadOgre Aug 26 '21 at 18:41
@MadOgre not really - this was based on the OP's current solution. They used `Object.keys` – TryingToImprove Aug 31 '21 at 09:11

Gayane · Answer 2 · 2019-01-24T11:49:38.190

26

You get this error because your variable subjects is an Object not Array, you can use map() only for Array.

In case of mapping object you can do this:

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

edited Jan 24 '19 at 11:49

answered Nov 25 '16 at 11:30

Gayane

547
4
12

정형석 · Answer 3 · 2019-12-27T07:08:37.340

12

Use Object.entries() function.

Object.entries(object) return:

[
    [key, value],
    [key, value],
    ...
]

see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

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

edited Dec 27 '19 at 07:08

answered Dec 26 '19 at 09:04

정형석

139
1
7

score 9 · Answer 4 · edited Apr 07 '20 at 20:47

9

Map over the keys of the object using Object.keys():

{Object.keys(yourObject).map(function(key) {
  return <div>Key: {key}, Value: {yourObject[key]}</div>;
})}

edited Apr 07 '20 at 20:47

brooksrelyt

3,925
5
31
54

answered Sep 15 '18 at 00:30

Rami Salim

182
2
11

score 8 · Answer 5 · answered Jan 12 '21 at 00:23

8

I use the below Object.entries to easily output the key and the value:

{Object.entries(someObject).map(([key, val], i) => (
    <p key={i}>
        {key}: {val}
    </p>
))}

answered Jan 12 '21 at 00:23

StefanBob

4,857
2
32
38

noa-dev · Answer 6 · 2018-09-17T11:28:14.263

Do you get an error when you try to map through the object keys, or does it throw something else.

Also note when you want to map through the keys you make sure to refer to the object keys correctly. Just like this:

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

You need to use {subjects[item]} instead of {subjects[i]} because it refers to the keys of the object. If you look for subjects[i] you will get undefined.

YanMax · Answer 7 · 2020-05-05T16:59:48.433

1

I am not sure why Aleksey Potapov marked the answer for deletion but it did solve my problem. Using Object.keys(subjects).map gave me an array of strings containing the name of each object, while Object.entries(subjects).map gave me an array with all data inside witch it's what I wanted being able to do this:

const dataInfected = Object.entries(dataDay).map((day, i) => {
    console.log(day[1].confirmed);
});

I hope it helps the owner of the post or someone else passing by.

edited May 05 '20 at 16:59

answered May 04 '20 at 16:32

YanMax

75
4

Instead of ```(day, i)``` you can do ```([key, val], i)``` and directly use the ```val``` in your code. – Guy Hoka May 08 '21 at 20:32

score 0 · Answer 8 · answered Mar 27 '20 at 06:28

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>
))}

How can I map through an object in ReactJS?

8 Answers8

Linked

Related