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

Does this answer your question? [Loop inside React JSX](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) — Dupocas, Nov 30 '20 at 13:38

score 1 · Accepted Answer · answered Nov 30 '20 at 13:44

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>
  );

Just a side note: when you render a list of items from an array, do not forget to add the `key` attribute for each item. ;) — secan, Nov 30 '20 at 14:03
... Also, please notice that in React Native a `` element can only contain text; it cannot have a child element of type ``. The `` element should be moved so that it is a sibling of `` — secan, Nov 30 '20 at 14:10

score 1 · Answer 2 · answered Nov 30 '20 at 13:56

<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>

score 0 · Answer 3 · answered Nov 30 '20 at 13:38

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.

How to loop through complex object or array of object

3 Answers3