如何访问 JSON 数组中的所有值？答案

【问题标题】：How do you access all values in JSON array?如何访问 JSON 数组中的所有值？
【发布时间】：2018-02-12 14:45:02
【问题描述】：

我现在唯一可以访问的数据是数组的开头部分：

[
    {
        /*start*/
        "username" : "Bob",
        "password":"123456",
        "bio":"Hi",
        /*End*/
        "data":
        [
            {
                "pet" : "dog",
                "age" : "20",
                "city" : "5"
            },
            {
                "pet" : "cat",
                "age" : "18",
                "city" : "7"
            }
        ]
    }
]

我也可以访问data 数组的一部分，但我正在尝试访问所有这些。例如：{item.data[1].pet}。我尝试使用 for 循环，但没有成功。我也在使用 react-native flat list 并且 dataSource: responseJSON.data 对我也不起作用。我确信必须有一种方法可以访问 pet 的所有值，而不是每次只访问一个，我只是不知道该怎么做。

另外，由于我是初学者，任何提示将不胜感激。

编辑：尝试从 JSX 外部循环：

 var itemList = [];

for (var i = 0; i < responseJSON[0].data.length; i++) { itemList.push(<Text> {responseJson[0].data[i].pet}</Text>); }

我把它从render() 中取出，然后我把itemList 放在这里：

<FlatList

          data={ this.state.dataSource}

          ItemSeparatorComponent = {this.FlatListItemSeparator}


          renderItem={({item}) => <View>

          {itemList}
          </View>
             }

          keyExtractor={(item, index) => index}

     />

现在不理解 itemList 是一个变量。我收到语法错误。

编辑 2：感谢大家，我唯一需要帮助的是将变量放入 componentDidMountin React Native 中。

【问题讨论】：

循环通过data有什么问题？我希望你知道数组以 0 而不是 1 开头，对吧？
你能贴出你用来尝试访问这些数据的代码吗？
您的renderItem 函数正试图将itemList 转储到View 中。您可能只想为每个renderItem 呈现一个项目。看看这是否对您有帮助 renderItem={(item) => <View><Text>{item.pet}</Text></View>，此外，如果列表会发生变化，您应该阅读 extraData FlatList 道具。
@TravisWhite 我为数组中有关data 的数据执行了此操作，它可以工作。我试图在 JSX 中转储 data 之类的 pets 值。
@LaneyWilliams 如果您知道数据可能包含哪些属性，只需硬编码所有内容？ {item.pet} {item.age} {item.city}？如果您不知道数据可能包含哪些属性，可以查看stackoverflow.com/questions/8312459/…

标签： arrays json react-native

【解决方案1】：

我没有使用 React 的经验，但从我的发现看来应该这样做：

const responseJson = [
    {
        /*start*/
        "username" : "Bob",
        "password":"123456",
        "bio":"Hi",
        /*End*/
        "data":
        [
            {
                "pet" : "dog",
                "age" : "20",
                "city" : "5"
            },
            {
                "pet" : "cat",
                "age" : "18",
                "city" : "7"
            }
        ]
    }
];


const listItems = responseJson[0].data.map((details) =>
  <li>{details.pet}</li>
);

ReactDOM.render(
  <ul>{listItems}</ul>,
  document.getElementById('root')
);

我得到的输出是：

狗

猫

【讨论】：

是的，这绝对看起来应该可以工作，但是在 React Native 中，const 只允许在 render(){} 中使用。我可以对此进行进一步研究。 @安德鲁

【解决方案2】：

你可以在javascript中这样做：

var json = {"data":[{"pet":"dog","age":"20","city":"5"},{"pet":"cat","age":"18","city":"7"}]};


for (var i = 0; i < json.data.length; i++) {
  var object = json.data[i];
  console.log(object);
  console.log(object.pet, object.age, object.city);
}

【讨论】：

数据在数据库中

【解决方案3】：

试试这个循环：

for (var i = 0; i < responseJSON[0].data.length; i++) { 
    alert(responseJSON[0].data[i].pet);
}

这里的工作示例：

https://plnkr.co/edit/c1sZYKrBWHFJOKwHEMbU?p=preview

【讨论】：

好的，这很好，但我尝试将它放入 JSX。 var itemList = []; for (var i = 0; i < responseJSON[0].data.length; i++) { itemList.push(<Text> {responseJson[0].data[i].pet}</Text>); } 我在var itemList= []; @Leo R 上不断收到语法错误。
@LaneyWilliams，在您的问题中添加您的尝试，在这里它们更难理解并且可见度要低得多。

【解决方案4】：

为什么不使用 Lodash 库将 responseJson 中的所有数据转换为对象，然后从中取出数据对象并将其分配给变量，然后将其转换回数组。之后，您将数据源更改为该数组，您将获得

查看 Lodash here 的文档

【讨论】：

我没有投反对票，但他为什么需要这样的图书馆？