0

I am getting the following JSON response from an API:

[{
    "order_id":"1111",
    "restaurant_id":"ABC",
    "fullfillment":"Delivery",
    "order_channel":"iOS",
    "0":[{
        "id":"678",
        "info":"long string",
        "created_at":"2022-02-12T04:34:51.000000Z",
        "item":[
            {"id":328,
            "order_id":"123",
            "item_sold":"item number 1",
            "item_price":"10.0",
                "topping":[{"id":987,
                    "item_id":"263",
                    "topping_ordered_name":"Name of x topping",
                    "topping_paid_price":"2.0"},
                    {"id":988,
                    "item_id":"633",
                    "topping_ordered_name":"Name of y topping",
                    "topping_paid_price":"1.0"},
                    {"id":989,
                    "item_id":"453",
                    "topping_ordered_name":"Name of z topping",
                    "topping_paid_price":"3.0"}]
            },
            {"id":329,
            "order_id":"123",
            "item_sold":"item number 2",
            "item_price":"12.0",
                "topping":[{"id":768,
                    "item_id":"432",
                    "topping_ordered_name":"Name of a topping",
                    "topping_paid_price":"2.0"},
                    {"id":988,
                    "item_id":"763",
                    "topping_ordered_name":"Name of b topping",
                    "topping_paid_price":"1.0"},
                    {"id":989,
                    "item_id":"773",
                    "topping_ordered_name":"Name of c topping",
                    "topping_paid_price":"1.0"}]
            }
        ]
    }]
}]

I am retrieving the values in a React app like this:

<tbody>
{this.state.sales.map((sale) => (
<tr key={sale.order_id} tabIndex="0">
<td>
{sale.restaurant_id}
{sale.fullfillment}
{sale.order_channel}
</td>
</tr>
))}
</tbody>

How do I access the elements nested within "0" including nested elements and objects?

Example "0".id, "0".info and a nested object like "0".item.order_id or "0".item.item_sold or even further nested objects like "0".item.topping.topping_ordered_name

I am having trouble with the name "0" and I am unsure on how to access it. I am certain that this will always remain named "0" and will not change later to "1" or other, but what if I ever encounter other objects named like numbers, "0", "1", "2"... sale.0 is not valid and sale[0] does not return any results.

Edit: If I console.log(sale[0]) it returns:

Uncaught Error: Objects are not valid as a React child (found: object with keys {id, info, created_at, item}). If you meant to render a collection of children, use an array instead

and if i console.log(sale[0].info)

Uncaught TypeError: Cannot read property 'info' of undefined

toolnin
  • 134
  • 1
  • 1
  • 16
  • 1
    _"sale[0] does not return any results"_ - `sale[0]` should work – Andreas Feb 15 '22 at 16:15
  • When I console log sale[0]: Uncaught Error: Objects are not valid as a React child (found: object with keys {id, info, created_at, item}). If you meant to render a collection of children, use an array instead. – toolnin Feb 15 '22 at 16:19
  • Andreas is correct, sale[0] does return the expected values. The problem was that the JSON array returns some objects without the "0" element and React throws an error. The issue was in the JSON string. We fixed our JSON api to always return a "0" element even if empty and it works perfectly now. – toolnin Feb 15 '22 at 18:36

1 Answers1

0

Seems to be a multidimensional array sale[0][0].id, sale[0][0].info should return values.

Derek Mwachinga
  • 129
  • 1
  • 5