React map on object then array

Question

This is my object and I want to map this in my component but I have problem, I cant use map on this object. First value is vote and next is array of users. How I cna use map on this in babel ?

  var ObjVote = {
        '1':['EwaK','Jacek','Jacek'],
        '2':['Anna','Pawel','EwaK'],
        '3':['Anna','EwaK','Jacek'],
        '4':['Jas','Jas','Pawel'],
        '5':['Anna','Jas','Pawel']
        }

stackoverflow.com/questions/6857468/…

Combine
– Combine

2017-12-07 08:50:07 +00:00
Commented Dec 7, 2017 at 8:50 — Combine
– Combine, Commented Dec 7, 2017 at 8:50

Mayank Shukla · Accepted Answer · 2017-12-07 09:14:05Z

2

You can use:

Object.keys(ObjVote)
         .map(vote => ({ vote: vote, voters: ObjVote[vote]}))
         .map(data => <Vote {...data} key={data.vote} />)

Or

Object.keys(ObjVote)
         .map(vote => ({ vote: vote, voters: ObjVote[vote]}))
         .map(data => <Vote data={data} key={data.vote} />)

Now inside Vote component you can access votes by props.data.votes and voters array by props.data.voters.

edited Dec 7, 2017 at 9:14

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

answered Dec 7, 2017 at 8:54

Khiem Tran

6,16916 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Paweł Baca Over a year ago

Unexpected token, expected ; voters: ObjVote[vote]}, after voters

Mayank Shukla Over a year ago

@PawełBaca put the braces around {} in first map, like this: ({ vote: vote, voters: ObjVote[vote]}), it will work.

Paweł Baca Over a year ago

Object.keys(ObjVote)                .map(vote => ({ vote: vote, voters: ObjVote[vote]}))                .map(data => <Vote ...data key={data.vote} />)

now error after vote:

Mayank Shukla Over a year ago

@PawełBaca put the {}, like this: <Vote {...data} key={data.vote} /> or <Vote vote={data.vote} voters={data.voters} key={data.vote} />

Paweł Baca Over a year ago

Ok it work,but I have to style each element of data.voters. Do you know how ? :) data.voters is EwaKJacekJacek I need <div>Ewa</div> <div>Jacek</div>

|

Mikhail Katrin · Accepted Answer · 2017-12-07 08:51:58Z

0

You cannot use map on Object. But you can use Object.keys() and then map.

 let ObjVote = {
  '1':['EwaK','Jacek','Jacek'],
  '2':['Anna','Pawel','EwaK'],
  '3':['Anna','EwaK','Jacek'],
  '4':['Jas','Jas','Pawel'],
  '5':['Anna','Jas','Pawel']
}

let data = Object.keys(ObjVote).map(key => {
  return {
    vote: key,
    users: ObjVote[key]
  }
})

console.log(data)

answered Dec 7, 2017 at 8:51

Mikhail Katrin

2,4041 gold badge12 silver badges17 bronze badges

1 Comment

Franciszek Błasiak Oct 13 at 12:58

Why Pawel and Ewak

Ori Drori · Accepted Answer · 2017-12-07 09:08:57Z

0

You can convert it to an array using Array#from, and then you can map it. First you need to convert the object to an array like object, by adding the length property. To add the length property, you can use Object#assign, and Object#keys:

const ObjVote = {
  '1':['EwaK','Jacek','Jacek'],
  '2':['Anna','Pawel','EwaK'],
  '3':['Anna','EwaK','Jacek'],
  '4':['Jas','Jas','Pawel'],
  '5':['Anna','Jas','Pawel']
}

const array = Array.from(
  Object.assign( 
    {}, 
    ObjVote, 
    { length: Object.keys(ObjVote).length + 1 } // add the number of keys + 1 (the missing 0 index) as the length property 
  ),
  (voters, vote) => ({ vote, voters }) // create the vote object
).slice(1); // remove the 1st empty element

console.log(array);

edited Dec 7, 2017 at 9:08

answered Dec 7, 2017 at 8:51

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Collectives™ on Stack Overflow

React map on object then array

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related