Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Loop an object in react?

Data :

enter image description here

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

like image 334
Егор Кротенко Avatar asked Aug 10 '17 06:08

Егор Кротенко


People also ask

How do you loop an object object in React?

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.

How do you loop in React?

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.

Can we loop object in Javascript?

each() method. It can be used to seamlessly iterate over both objects and arrays: $. each(obj, function(key, value) { console.


1 Answers

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);
   })
})
like image 141
Mayank Shukla Avatar answered Oct 31 '22 09:10

Mayank Shukla