我有以下编码的 JSON:
const data = JSON.parse('{"first":{"aaa":"111","bbb":"2222"},"second":{"aaa":"111","bbb":"2222"}}')
解码后如下:
{
"first": {
"aaa": "111",
"bbb": "2222"
},
"second": {
"aaa": "111",
"bbb": "2222"
}
}
然后我尝试了几种方法来循环这些数据,如下所示,但没有按预期工作:
{Object.keys(data).map((key, value) =>
console.log(key);
<li>{value.aaa}</li>
)}
我可以控制台注销数据并看到它循环,但我看不到显示 aaa 或 bbb 值。
我在这里做错了什么?
您可以分配一个保存值的变量。
var a = {
"first": {
"aaa": "111",
"bbb": "2222"
},
"second": {
"aaa": "111",
"bbb": "2222"
}
}
使用以下方法获取密钥:
var keys = Object.keys(a);
最后迭代它:
for(var i = 0; i < keys.length; i++) {
var key = (keys[i]) ;
console.log(a[key])
}
使用
for in
循环:
{for (key in data) {
for (innerKey in data[key]) {
<li>{data[key][innerKey]}</li>
}
}}
我们需要在
key
和 innerKey
周围使用括号的原因是因为需要首先计算这些属性。
尝试使用
{Object.keys(data).map((key, index) =>
<li key={index}>{data[key].aaa}</li>
)}
我成功运行了你的代码。 基本上没问题,只需要更改 .map 中的属性名称“key”,因为它与 React 关键字冲突。
{Object.keys(data).map((label, index) => (
<div key={index}>{data[label].aaa}</div>
))}