Question

数据：

我有数组内部数据，我按默认代码尝试循环：

 <div className="loop-container">
    {
        joblist.map((itemb,index) => (
            <div>
            </div>
        ))
    }
</div>

我想首先显示该数组的名称，（这是日期）然后显示这个数组包含的内容，但是我收到错误：

joblist.map不是函数

Answer 1

我们不能在对象上使用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：

检查此代码段

＆＃13;

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

＆＃13;

使用Object.keys：

检查此代码段

＆＃13;

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

＆＃13;

使用Object.values：

检查此代码段

＆＃13;

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

＆＃13;

循环一个物体反应？

1 个答案: