如何在 JS 中遍历嵌套对象

Question

I am storing some order details in the firebase database and when I retrieve the data from it, it shows something like below.

Array [
  Object {
    "cartItems": Array [
      Object {
        "count": 1,
        "key": "1",
        "name": "EARRINGS",
        "pic": 20,
        "price": "200",
      },
      Object {
        "count": 1,
        "key": "2",
        "name": "Ring",
        "pic": 20,
        "price": "300",
      },
    ],
    "orderId": "OD4242JUL28",
  },
  Object {
    "cartItems": Array [
      Object {
        "count": 1,
        "key": "3",
        "name": "Staple",
        "pic": 20,
        "price": "400",
      },
      Object {
        "count": 1,
        "key": "2",
        "name": "Ring",
        "pic": 20,
        "price": "300",
      },
    ],
    "orderId": "OD4242JUL28",
  },
]

I m able to get the first or second object by using index in [] but after that, if I use map function on it, I am unable to iterate over it. I want to retrieve every cartItem and iterate over it to show it in the orders section.

FLATLIST

<FlatList 
          data={this.state.order}
          keyExtractor={(item) => item.key }
          showsVerticalScrollIndicator={false}
          renderItem={({item}) =>(
            <View>
                <Image source={item.pic} style={{width:width/2.05,height:150}} />
                <Text style={styles.text}>{item.cartItems.name}</Text>
                <Text style={styles.text}>{item.orderId}</Text>
          </View>
          ) }
        />

This only returns orderID but item.cartItems.name returns nothing.

Answer 1

@Lovepreet Singh try to use recursion method to iterate nested array Of objects.

Answer 2

Somehow I figured out with the below code

<FlatList 
          data={this.state.order}
          keyExtractor={(item) => item.key }
          // numColumns={2}
          showsVerticalScrollIndicator={false}
          renderItem={({item}) =>(
            <View>
                <Image source={item.pic} style={{width:width/2.05,height:150}} />
                <Text style={styles.text}>{item.cartItems.keys}</Text>
                {item.cartItems.map(val=>{
                  return(
                  <View>
                    <Text> {val.count} </Text>
                    <Text> {val.price} </Text>
                    <Text> {val.name} </Text>
                    <Text> {val.pic} </Text>
                    </View> )
                })}
                <Text style={styles.text}>{item.orderId}</Text>
          </View>
          ) }
        />

It uses map function inside the flatlist and I believe there is some wrong with this as it gives a warning Functions are not valid as a React child. Please guide me the best way to do this.