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']
        }

https://stackoverflow.com/questions/6857468/converting-a-js-object-to-an-array-using-jquery — Combine, Dec 07 '17 at 08:50

score 2 · Accepted Answer · edited Dec 07 '17 at 09:14

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 07 '17 at 09:14

Mayank Shukla

100,735
18
158
142

answered Dec 07 '17 at 08:54

Daniel Tran

6,083
12
25

Unexpected token, expected ; voters: ObjVote[vote]}, after voters – Paweł Baca Dec 07 '17 at 08:57
2

@PawełBaca put the braces around `{}` in first map, like this: `({ vote: vote, voters: ObjVote[vote]})`, it will work. – Mayank Shukla Dec 07 '17 at 09:00
`Object.keys(ObjVote) .map(vote => ({ vote: vote, voters: ObjVote[vote]})) .map(data => )` now error after vote`:` – Paweł Baca Dec 07 '17 at 09:02
Dont know why no I ahve problem with ` `... is problem – Paweł Baca Dec 07 '17 at 09:06
2

@PawełBaca put the `{}`, like this: `` or `` – Mayank Shukla Dec 07 '17 at 09:07
1

Ok it work,but I have to style each element of `data.voters`. Do you know how ? :) `data.voters` is `EwaKJacekJacek` I need `
Ewa
` `
Jacek
` – Paweł Baca Dec 07 '17 at 09:16
OK everything work, thanks. I spend two days on this and you do this in 10min nice :) – Paweł Baca Dec 07 '17 at 09:28

Ori Drori · Answer 2 · 2017-12-07T09:08:57.953

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

score 0 · Answer 3 · answered Dec 07 '17 at 08:51

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)

React map on object then array

3 Answers3