How do I .map() through data that is layered?

Question

I'm learning about fetch() and am struggling to overcome an issue. I have some JSON data I am fetching, but the key is the "parent" of each item, eg it looks like:

 products
    p1
      description:"Lorem Ipsum"
      name:"some product"
      price:9.99
    p2
      description:"Dolar sit amet"
      name:"another product"
      price:15.5

I'd like to .map() this data into a new array, as such:

  const newData= data.results.map(item => {
    return {
      id: item.id,
      name: item.name,
      description: item.description,
      price: item.price
    };
  });

But I don't understand how I can iterate through each item and save it's ID without a key.

Would anyone know how I could do this?

The data you listed doesn't have a `id` or `title`, just a `name`. Can you post a sample the actual data as JSON in the format you expect? — mousetail, Jun 02 '22 at 06:43
Sorry - typo - it is `name` not `title`. I am still not sure how to get the ids (p1, p2) — MeltingDog, Jun 02 '22 at 06:44
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries — , Jun 02 '22 at 06:47
@mousetail yes, thats right. Ultimately I want to use the data in a React component like: `products.map(meal => )` — MeltingDog, Jun 02 '22 at 06:49
@AlanOmar - sorry mistake. I fixed it. Just trying to keep my company anonymous. — MeltingDog, Jun 02 '22 at 06:52
Does this answer your question? [map function for objects (instead of arrays)](https://stackoverflow.com/questions/14810506/map-function-for-objects-instead-of-arrays) — , Jun 02 '22 at 06:55
It's still hard to understand what you are trying to achieve here, if you could post some pseudo input and the desired output it would be a great help for us to help you. — Alan Omar, Jun 02 '22 at 06:59

score 3 · Accepted Answer · edited Jun 02 '22 at 06:59

You can do this with Object.entries() function:

The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs. This is the same as iterating with a for...in loop, except that a for...in loop enumerates properties in the prototype chain as well.

Object.entries(data.products).map(([key, value]) => ({
    id: key,
    name: value.name,
    description: value.description,
    price: value.price
}));

score 2 · Answer 2 · answered Jun 02 '22 at 06:47

Since what you have posted looks like object, rather than array. You have to first transform it into an array. I would suggest using Object.entries()

Object.entries(products).map(([key, value])=> {
 return {
   id: key, 
   name: value.name,
   description: value.description,
   price: value.price
 }
})

How do I .map() through data that is layered?

2 Answers2