如何在React-Native上使用嵌套JSON填充Flat List

Question

我是React-Native的新手，因此，我想了解如何才能檢索要填充到FlatList中的數據。 我收到的JSON格式如下所示

[
  {
    "18": {
      "sellingUnitName": "unité(s)",
      "qualifier": "GOOD",
      "sizeQualifierName": "gr.20"
    },
    "19": {
      "sellingUnitName": "unité(s)",
      "qualifier": "BAD",
      "sizeQualifierName": "gr.18-20"
    }
  }
]

這是我的FlatList的樣子

<FlatList
    data={ this.state.dataSource }
    ItemSeparatorComponent = {this.FlatListItemSeparator}
    renderItem={({item}) => <Text>{item.sellingUnitName}</Text>}
    keyExtractor={(item, index) => index.toString()}
/>

如果格式是這樣，我的FlatList工作正常

[
  {
    "sellingUnitName": "unité(s)",
    "qualifier": "GOOD",
    "sizeQualifierName": "gr.20"
  },
  {
    "sellingUnitName": "unité(s)",
    "qualifier": "BAD",
    "sizeQualifierName": "gr.18-20"
  }
]

我的問題是：如何通過遍歷每個項目並忽略第一個ID（例如第一個示例中的“ 18”）來設法使用第一種格式，以便可以在FlatList中使用item.keyName顯示每個值？ 似乎我需要獲取嵌套元素，但我不知道如何執行此操作。

如果需要，這就是我獲取數據的方式

fetch('https://www.mywebsite.com/test.php')
  .then((response) => response.json())
  .then((responseJson) => {
      this.setState({
        dataSource: responseJson
      };
     })
   .catch((error) => {
       console.error(error);
   });

謝謝！

Answer 1

通過使用Object.keys和Array.map我們可以使數據看起來像您想要的。

 let data = [ { "18": { "sellingUnitName": "unité(s)", "qualifier": "GOOD", "sizeQualifierName": "gr.20" }, "19": { "sellingUnitName": "unité(s)", "qualifier": "BAD", "sizeQualifierName": "gr.18-20" } } ]; let dataObj = data[0]; let dataArray = Object.keys(dataObj).map(key => { let obj = dataObj[key]; obj.keyName = key; return obj; }) console.log(dataArray) 

此后，dataArray將看起來像[{keyName: 18, sizeQualifierName: "gr.20", ...}, {keyName: 19, sizeQualifierName:"gr.18-20", ...}]