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

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

• javascript
• arrays
• reactjs

• Is joblist the object that you're showing in your screenshot? – Robby Cornelissen Commented Aug 10, 2017 at 6:49
• 3 To be fair the console has your answer. As you can clearly see the joblist is an object where the keys are dates and not an array. – GillesC Commented Aug 10, 2017 at 6:49
• So as @GillesC already said: it's not an array, it's an object. – Robby Cornelissen Commented Aug 10, 2017 at 6:51
• joblist is not an array, that's an object. You need to convert it to array first. – Win Commented Aug 10, 2017 at 7:04
• I modify to this, now I see all keys {Object.keys(joblist).map((key) => ( <div>{key}</div> ))} but how next show arrays? – Егор Кротенко Commented Aug 10, 2017 at 7:09

2 Answers 2

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

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>