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

【问题标题】：How to fill Flat List with nested JSON on React-Native如何在 React-Native 上使用嵌套 JSON 填充平面列表
【发布时间】：2018-03-15 17:27:12
【问题描述】：

我是 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);
   });

谢谢！

【问题讨论】：

标签： javascript json react-native

【解决方案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", ...}]

【讨论】：