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

Dupocas
– Dupocas

2020-11-30 13:38:41 +00:00
Commented Nov 30, 2020 at 13:38 — Dupocas
– Dupocas, Commented Nov 30, 2020 at 13:38

Dor D · Accepted Answer · 2020-11-30 13:44:06Z

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

answered Nov 30, 2020 at 13:44

Dor D

261 bronze badge

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

2 Comments

secan Over a year ago

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 Over a year ago

... Also, please notice that in React Native a <Text> element can only contain text; it cannot have a child element of type <Image>. The <Image> element should be moved so that it is a sibling of <Text>

secan · Accepted Answer · 2020-11-30 13:56:32Z

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

Jkarttunen · Accepted Answer · 2020-11-30 13:38:17Z

0

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.

answered Nov 30, 2020 at 13:38

Jkarttunen

7,7014 gold badges30 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to loop through complex object or array of object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related