如何遍歷復雜的 object 或 object 數組

Question

我正在嘗試制作一個反應原生的應用程序。 我有一個 object 下面來自 firebase 並通過推送方法制作，我嘗試了 foreach 和 map 但失敗了所以把問題貼在這里我正在學習它但是已經有幾天了

 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,
        },
      ],
    },
  }];

我如何遍歷這些數據並列出如下內容

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

我正在添加 firebase 實時數據庫截圖如下

Answer 1

您可以遍歷 object 的鍵以獲取訂單 ID，並對orders屬性進行第二次迭代以獲取每個訂單的詳細信息

 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

它只是循環內的循環。 或地圖內的地圖。 您可能希望將 object 道具轉換為對，或者擁有一個可以 map2668CFDE6319ACZ4BEB6 屬性的助手 function

例如，您可以使用 lodash toPairs 方法或 lodash mapValues 方法來執行此操作。