如何读取和显示 JSON答案

【问题标题】：How to read and display JSON如何读取和显示 JSON
【发布时间】：2019-08-17 15:55:34
【问题描述】：

我正在尝试打开一个本地 JSON 文件并将信息显示在我的应用程序上。

代码似乎可以运行，但未显示 JSON 信息。如何获取要显示的 JSON 信息、姓名和年龄字段？

JSON 文件：

[
    {
        "name": "George",
        "age": "25"
    },
    {
        "name": "Sarah",
        "age": "42"
    }
]

App.js：

import * as myfile from './myfile.json'

const name = myfile.name;
const age = myfile.name;

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>This is name: {name} This is age: {age}
        </Text>
      </View>
    );
  }
}

【问题讨论】：

stackoverflow.com/questions/47206924/…的可能重复
试试 myfile[1].name.. 它是一个数组..

标签： javascript reactjs react-native

【解决方案1】：

所以你正在访问一个数组，没有myfile.name 可以分配给const name，但是你可以这样做； const name = myfile[0].name 仅供乔治参考。

最后，您没有正确地从 JSON 中提取信息。

P.S.，如果你能告诉我预期的行为是什么，我可以帮助你。

【讨论】：

太棒了！如果我继续这个包含 100 个条目的 JSON 文件，我会继续计数到相应的条目吗？例如 [1],[2],[3]-[100]
是的，您必须提取该信息。您可以通过以下方式进行：codesandbox.io/s/1vn9okn8kj
@axell2017 立即尝试。
非常好的方法。 JSON 文件是否需要其中的“const JSON =”？有没有办法在 JSON 文件中不声明任何 javascript 的情况下做到这一点？谢谢！

【解决方案2】：

那是因为您的 myFile 不是对象而是数组。

使用地图数组方法：

...
 <View style={styles.container}>
       {myFile.map(({ name, age }) => (
        <Text>This is name: {name} This is age: {age}
        </Text>
       )}
 </View>
...

Hope that helped!

【讨论】：