How to loop through complex object or array of object

Question

I am trying to make an app in react native. I have a object below which comes from firebase and made by push method, I tried foreach and map but failed So post the problem here I am learning it but It has been some days I stuck here

 const order1 = [{
    "-MMp_6FIqEa8ZzrRiYV2": {
      "orders":  [
         {
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg",
          "id": 1,
          "name": "Tea",
          "price": 7,
        },
      ],
    },
    "-MMp_aLM3BO0zUR4zxdh":  {
      "orders":  [
         {
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg",
          "id": 2,
          "name": "Sugar Free Tea",
          "price": 12,
        },
         {
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg",
          "id": 3,
          "name": "Tusi tea",
          "price": 15,
        },
         {
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg",
          "id": 4,
          "name": "Ginger Tea",
          "price": 12,
        },
      ],
    },
    "-MMp_huUoxv9Kencff7p":  {
      "orders":  [
         {
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg",
          "id": 2,
          "name": "Sugar Free Tea",
          "price": 12,
        },
         {
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg",
          "id": 3,
          "name": "Tusi tea",
          "price": 15,
        },
         {
          "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/talhaconcepts/128.jpg",
          "id": 4,
          "name": "Ginger Tea",
          "price": 12,
        },
      ],
    },
  }];

How can i loop through such data and list someting like below

<ScrollView>

                <Card>
                    <Text>Order Id: MM0mAUoUrs3VzbdZJy9</Text>
                    <Card>
                        <Text>
                        Ginger Tea, Price: 12
                        <Image style={styles.image} resizeMode="cover" source={{ uri: avatar }}/>,
                        </Text>
                    </Card>
                </Card>
                <Card>
                    <Text>Order Id: MM0o8E4Eo13O3ULdNsL</Text>
                    <Card>
                        <Text>
                        Sugar Free Tea,Price: 10,
                        avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'
                        </Text>
                    </Card>
                    <Card>
                        <Text>
                         Tea,Price: 8,
                        avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/evagiselle/128.jpg'
                        </Text>
                    </Card>
                </Card>
                
          </ScrollView>  

I am adding the firebase realtime database screenshot below

Answer 1

You can iterate over the keys of the object to get the orders ids, and do a second iteration over the orders property to get each order's details

 const orders = order1[0];
 const orderIds = Object.keys(orders);
  return (
  <ScrollView>
      {orderIds.map((orderId) => (
        <Card>
          <Text>Order Id:{orderId}</Text>
          {orders[orderId].orders.map((order) => (
            <Card>
              <Text>
                {order.name}, Price: {order.price}
                <Image
                  style={styles.image}
                  resizeMode="cover"
                  source={{ uri: order.avatar }}
                />
                ,
              </Text>
            </Card>
          ))}
        </Card>
      ))}
    </ScrollView>
  );

Answer 2

<ScrollView>
    {order1.map((item) => {
        const orderId = Object.keys(item)[0]
        return (
            <Card key={orderId}>
                <Text>Order Id: {orderId}</Text>
                {item.orders.map((product) => {
                    return (
                        <Card key={`${orderId}_${product.id}`}>
                            <Text>
                                {product.name}, Price: {product.price}
                            </Text>
                            <Image
                                style={styles.image}
                                resizeMode="cover"
                                source={{ uri: product.avatar }}
                            />
                        </Card>
                    );
                })}
            </Card>
        );
    })}
</ScrollView>

Answer 3

It's just loops inside loops. Or maps inside maps. You'll probably want to either convert the object props to pairs, or to have a helper function that can map object properties.

For example, you can do this with lodash toPairs method, or lodash mapValues method.