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
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);
})
})
key={el.id} not {id}, updated the answer.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>
joblistthe object that you're showing in your screenshot?joblistis an object where the keys are dates and not an array.joblistis not an array, that's an object. You need to convert it to array first.{Object.keys(joblist).map((key) => ( <div>{key}</div> ))}but how next show arrays?