Loop through a object attribute while in a loop

Question

My API call gets a response like this

  {
  products: {
    product0: {
      id: 'F103_SURFACELAPTOP_15',
      quantity: 47,
      description: 'Surface Laptop 15 Zoll'
    },
     product1: {
      id: 'F101_MACBOOKPRO_13',
      quantity: 10,
      description: 'Macbook Pro 13 Zoll'
    }
  },
  salesOrderId: '9000002080'
}

It can contain 1 - n products. I'm trying to print the response in a table

This is what I got which is working but it will just show the first product. However I need to loop through products and show every product

  {value.map((item, i) =>
            <tr key={i}>
              <td>{i + 1}</td>
              <td>{item.salesOrderId}</td>
              <td>{item.products['product' + i].id}</td>
            </tr>
          )

This is how I tried to loop through it but with no success

   {value.map((item, i) =>
                <tr key={i}>
                  <td>{i + 1}</td>
                  <td>{item.salesOrderId}</td>
                  {item.products['product' + i].map((product, i) =>
                   <td key={i}> {product.i.id} </td>)}
                  <td>{item.products['product' + i].id}</td>
                </tr>
              )}

Whoever wrote that API should rethink the format of its output... — Andreas
– Andreas, Commented Mar 5, 2020 at 9:42

prasanth · Accepted Answer · 2020-03-05 09:52:28Z

1

Because the value is Object not a Array

so use like this

{Object.values(value).map((item, i) =>

instead of

{value.map((item, i) =>

use loop on this format

{Object.values(value).map((item, i) =>
                <tr key={i}>
                  <td>{i + 1}</td>
                  <td>{item.salesOrderId}</td>
                  {Object.values(item.products).map((product,ind) =>
                   <td key={ind}> {product.id} </td>)}
                  <td>{item.products['product' + i].id}</td>
                </tr>
              )}

edited Mar 5, 2020 at 9:52

answered Mar 5, 2020 at 9:42

prasanth

22.6k4 gold badges33 silver badges57 bronze badges

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

Comments

elvira.genkel · Accepted Answer · 2020-03-05 09:49:35Z

0

To iterate through object attributes you can use Object.values(value) if you need only values, and Object.entries(value) if you need both: keys and values. Both this functions return arrays on which function map is available

answered Mar 5, 2020 at 9:49

elvira.genkel

1,3331 gold badge6 silver badges12 bronze badges

Collectives™ on Stack Overflow

Loop through a object attribute while in a loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related