How to loop through complex object or array of object

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

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