Having trouble listing all values of JSON using map in react

Question

I have a Json data something like this

{
 A: {name: 'a', date: 'x'}
B: {name: 'b', date: 'x'}
C: {name: 'c', date: 'x'}
D: {name: 'd', date: 'x'}

}

I am trying to list all the name. However, i get an error

.data.map is not a function

My code looks something like this:

 {data.map((item) => {
    return(
      <div>
     {item.name}
    </div> )
 })}

Any help would be appreciated! Thanks

[`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) is an array method, it does not exist on objects. — Brian Thompson, May 21 '20 at 15:48

Smail Galijasevic · Answer 1 · 2020-05-21T16:02:26.100

1

What you have there is an object not an array and .Map() is an Array method.

You can do something similar with an object this way

 {data && Object.values(data).map((propVal) => {
    return(
      <div>
     {propVal}
    </div> )
 })}

You can also use Object.entries() each entry is an array with two elements. entry[0] is the key while entry[1] is the value. This way you can also add a check for the prop name.

 {data && Object.entries(data).map((entry) => {
            if(entry[0] === 'name') {
               return(
                  <div>
                 {propVal}
                </div> )
             })}    
}

Hope it helps :)

edited May 21 '20 at 16:02

answered May 21 '20 at 15:52

Smail Galijasevic

773
4
16

object.entries does not work like this – Incepter May 21 '20 at 15:53
Object.values() works, but he use only the name attribute. – Stoic Lion May 21 '20 at 16:01
I added object entries as an alternative – Smail Galijasevic May 21 '20 at 16:03

score 0 · Answer 2 · answered May 21 '20 at 15:49

0

You've to convert your object values to array.

{data && Object.values(data).map((item) => {
    return(
      <div>
     {item.name}
    </div> )
 })}

answered May 21 '20 at 15:49

Muhammad Ali

2,538
2
16
21

I've edited the answer, my bad. I didn't see that the data was an object. – Muhammad Ali May 21 '20 at 15:51
object.entries gives an array of arrays – Incepter May 21 '20 at 15:54
Yes, its object.values which will give array. – Muhammad Ali May 21 '20 at 15:55

score 0 · Accepted Answer · answered May 21 '20 at 15:49

0

try this

Object.values(data).map( // the rest

Object.values will give you an array of a given object's own enumerable property values.

answered May 21 '20 at 15:49

Incepter

2,711
15
33

Thank you! it works! – James Lee May 21 '20 at 16:02

Having trouble listing all values of JSON using map in react

3 Answers3