数据:
我有数据内部数组,我尝试循环默认代码:
<div className="loop-container">
{
joblist.map((itemb,index) => (
<div>
</div>
))
}
</div>
我想首先显示该数组的名称,(这是日期),然后显示这个数组包含的内容,但是我收到错误:
joblist.map不是一个函数
直接我们不能在对象上使用map
,filter
,首先我们需要从该对象获取一个数组(属性或属性值)然后我们才能。
你得到的数据不是数组,所以直接我们不能使用Array.prototype.map。你需要做的是首先使用Object.keys来获取数组中的所有键。一旦你得到数组使用map
和map
函数体内使用另一个map
迭代值。
你也可以使用Object.values或Object.entries,但模式与Object.keys()不同。
写这样:
<div className="loop-container">
{
Object.entries(joblist).map(([key, value]) => (
<div id={key}>
Date: {key}
{
value.map(el => <div key={el.id}> {el.created_time} </div> )
}
</div>
))
}
</div>
使用Object.entries检查此代码段:
let obj = {
'key1': [{a:1}, {a:2}, {a:3}],
'key2': [{a:4}, {a:5}, {a:6}],
'key3': [{a:7}, {a:8}, {a:9}]
};
Object.entries(obj).map(([key, value]) => {
console.log('key name = ', key);
value.map(el => {
console.log(el.a);
})
})
使用Object.keys检查此代码段:
let obj = {
'key1': [{a:1}, {a:2}, {a:3}],
'key2': [{a:4}, {a:5}, {a:6}],
'key3': [{a:7}, {a:8}, {a:9}]
};
Object.keys(obj).map(key => {
console.log('key name = ', key);
obj[key].map(el => {
console.log(el.a);
})
})
使用Object.values检查此代码段:
let obj = {
'key1': [{a:1}, {a:2}, {a:3}],
'key2': [{a:4}, {a:5}, {a:6}],
'key3': [{a:7}, {a:8}, {a:9}]
};
Object.values(obj).map(value => {
console.log('value = ', JSON.stringify(value));
value.map(el => {
console.log(el.a);
})
})
如你所见,joblist
不是数组,它是对象。如果你真的想使用map
那么你可以使用new Map()
。 new Map()构造函数接受一个可迭代的条目。使用Object.entries
,您可以轻松地从Object转换为Map:
var mapjoblist = new Map(Object.entries(joblist));
<div className="loop-container">
{mapjoblist.map((itemb,index) => (
<div>
.......
</div>
))}
</div>