React - How to map through an object and display values from nested keys -

Question

I have to map through an object and display all the values from all of the object keys in a list. The object looks like this.

const books = {
  book1: ['comedy', 'action', 'romance'];
  book2: ['horror', 'advanture', 'crime'];
  book3: ['fantasy, 'humour', 'war'];
}

I tried to create a separate array with all the keys using Object.values like this.

const objValues = Object.values)books

but the result was like this

Array[2]
  array[0]
    ['comedy', 'action', 'romance']

Array[2]
  array[1]
    ['horror', 'adventure', 'crime']

so on...

I have also tried to map through this objValues array and add each value to a new array that I could map over in JSX using forEach but that didn't work.

const allValues = () => {
  const res: any = [];
  objValues.forEach(key: any) => {
    key.forEach((value: any) => {
      res.push(value);
  });
 });
 return res;
};

How could I map through all of those values and display them in a list? Maybe this helps.

this is how I wanted to look

{object.map((value) => {
  <div>
    <span>{value}</span>
  </div>
})}

comedy
action
romance
horror
adventure
crime

The object isn't even valid. What is the real structure of the object? — Reinier68, Sep 13 '22 at 14:12
Are you just asking how to [Iterate through object properties](https://stackoverflow.com/q/8312459/328193)? — David, Sep 13 '22 at 14:16
Do you mean like this? https://codesandbox.io/s/suspicious-moon-c07fz6 — Reinier68, Sep 13 '22 at 14:24

score 0 · Answer 1 · answered Sep 13 '22 at 14:31

0

Based on your description of the output, you can iterate though the object using a for in loop to index at each "book" array in the "books" object. You would then have the arrays at our disposal to map through.

Something like :

const genres = []
for(let book in books){
    books[book].map(title=>{
        genres.push(title)
    })
}
console.log(genres)

answered Sep 13 '22 at 14:31

alltrust

61
5

Unfortunately, this through an error saying that "books[book].map is not a function" – Pollux Sep 14 '22 at 21:24

score 0 · Accepted Answer · answered Sep 13 '22 at 14:39

0

You can use flat then map to achieve what you want, don't forget to pass an unique key to the div.

Object.values(books).flat().map(v => <div key={v}> <span>{v}</span> </div>)

answered Sep 13 '22 at 14:39

Reifocs

704
3
16

kiranvj · Answer 3 · 2022-09-13T15:37:30.567

0

Use Object.values and then use Set to remove duplicates, after that you can iterate using map to render in page.

const books = {
  book1: ['crime', 'comedy', 'action', 'romance'],
  book2: ['horror', 'advanture', 'crime'],
  book3: ['fantasy', 'humour', 'war']
}

const result = [...new Set(Object.values(books).flat())];
console.log(result);

Final code will look something like this

<ul>
    { 
      [...new Set(Object.values(books).flat())].map(item => <li key={item}> {item} </li>)
    }

</ul>

edited Sep 13 '22 at 15:37

answered Sep 13 '22 at 14:45

kiranvj

32,342
7
71
76

1

Thank you for the extra info. It really helped – Pollux Sep 14 '22 at 21:23

React - How to map through an object and display values from nested keys -

3 Answers3