javascript - 如何在 React-Native 上使用嵌套 JSON 填充平面列表

Question

我是 React-Native 的新手，因此，Javascript，我正在尝试了解如何检索要填充到我的 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", ... }]