Rendering an Object of arrays of objects ReactJs

Question

I am arrays of objects from multiple firestore collections and storing them all in an object. I want to render the individual objects in the arrays is the object. This is how I fetch my data:

  const categories = {
    Pakoras: [],
    Vegitarisches: [],
    "Biryani Gerichte": [],
    Hähnchengerichte: [],
    "Indische Beilagen": [],
    Lammgerichte: [],
    "Ben & Jerrys": [],
    Getränke: [],
    Pizza: [],
    Kindermenüs: [],
    Spaghetti: [],
    Tortellini: [],
    Gnochi: [],
    Maccheroni: [],
    Tagliatelle: [],
    "Überbackene Nudeln": [],
    Salate: [],
    Fleischgerichte: [],
    "Schnitzel & Fleischgerichte": [],
    Risotto: [],
    "Überbackenes-Gemüse-Kartoffeln": [],
    "Chinesische-Gerichte-Gebratene-Nudeln-Reis": [],
  }
   const [foods, setFoods] = useState(categories)
  useEffect(() => {
    fetch()
  }, [])
  function fetch(){
      console.log("Fetching")
      Object.keys(categories).forEach(category => {
        fire.firestore().collection(category).get()
          .then(snapshot => {
            var food = []
            snapshot.forEach(doc => {
              food.push(doc.data())
              //console.log(doc.data())
            })
            categories[category] = food;
          }).catch(error => {
            console.log(error)
          })
      })
      //console.log(foods)
    }

A doc.data() object looks something like this:

    var example = {
        title: "example",
        price: 10,
        desc: "none"
    }

The objects are in an array under the respective category. How do I render this? I want to loop through everything and render it like this:

Category1:

title - price - desc
title - price - desc

Category2:

title - price - desc
title - price - desc

ray · Accepted Answer · 2021-02-09 15:44:52Z

1

Object.entries(categories) will allow you to iterate an array of key/value pairs from your object.

In your case the key would be the category and the value would be the array of foods in that category.

Object.entries(categories).map(([category, foods]) => {
  return (
    <div key={category}>
      <h1>{category}</h1>
      <ul>
        { foods.map(food => (
            <li key={food.title}>
               {food.title} - {food.price} - {food.desc}
            </li>
        )}
      </ul>
    </div>
  )
})

edited Feb 9, 2021 at 15:44

answered Feb 9, 2021 at 15:00

ray

27.3k5 gold badges31 silver badges30 bronze badges

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

3 Comments

Advait Over a year ago

Thanks. It works at first, but when I refresh the page the categories can bee seen but not the food's. Is this a firebase error?

ray Over a year ago

They haven't loaded yet. You're rendering the initial structure with all the empty arrays and you're never calling setFoods so the component never re-renders.

Advait Over a year ago

Ah ok thanks. I found another solution with arrays instead of objects

Collectives™ on Stack Overflow

Rendering an Object of arrays of objects ReactJs

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related