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
Use the Object. keys() method to get an array of the object's keys. Use the map() method to iterate over the array of keys.
Using the Array map function is a very common way to loop through an Array of elements and create components according to them in React. This is a great way to do a loop which is a pretty efficient and is a tidy way to do your loops in JSX. It's not the only way to do it, but the preferred way.
each() method. It can be used to seamlessly iterate over both objects and arrays: $. each(obj, function(key, value) { console.
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);
})
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With