如何遍历复杂的 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 方法来执行此操作。