Loop an object in react?

Question

Data :

I have data that have inside arrays, I try loop by default code:

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

I want show name of that arrays first, (this is date) then show what this arrays consist, But I get error:

joblist.map is not a function

Answer 1

Directly we can't use map , filter on object, first we need to get an array (either property or property values) from that object then only we can.

---

Data that you are getting is not an array, so directly we can't use Array.prototype.map . What you need to do is first use Object.keys to get all the keys in an array. Once you get the array use map on that and inside map function body use another map to iterate the values.

You can also use Object.values or Object.entries , but pattern will be not same as Object.keys() .

Write it like this:

<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>

Check this Snippet Using 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); }) }) 

Check this Snippet Using 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); }) }) 

Check this Snippet Using 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

As you see joblist is not array, it is object. If you really want to use map then you can use new Map() . The new Map() constructor accepts an iterable of entries. With Object.entries , you can easily convert from Object to Map:

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

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

       </div>

     ))}
</div>