循环一个物体反应？

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 ，但pattern与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); }) }) 

Answer 2

如你所见， joblist不是数组，它是对象。 如果你真的想使用map那么你可以使用new Map() 。 新的Map（）构造函数接受一个可迭代的条目。 使用Object.entries ，您可以轻松地从Object转换为Map：

var mapjoblist = new Map(Object.entries(joblist));

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

       </div>

     ))}
</div>