React : How To Map this Array and Display it

Question

I have request that response with this object and I need to display it, but I don't how to deal with because the ( 61, 70, 81 and so on)

here is my code which is not working

{ events.events.map(event =>(
    <div key={event.ID}> 
     <p>{event.name} </p>
    </div>))
}

events is object not array, so you can't use Array.map() method. — Rahul Kumar
– Rahul Kumar, Commented Jun 15, 2021 at 10:33
@RahulKumar is there a way that I can convert this object to array ? — Mohamed Ahmed
– Mohamed Ahmed, Commented Jun 15, 2021 at 10:35
You can only use map on arrays not on object. You either need to use Object.values, Object.entries or if you only want keys then Object.keys. — DecPK
– DecPK, Commented Jun 15, 2021 at 10:36
@MohamedAhmed added the answer below, can use Object.entries() method. — Rahul Kumar
– Rahul Kumar, Commented Jun 15, 2021 at 10:57

Tushar Shahi · Accepted Answer · 2021-06-15 10:44:38Z

2

You are getting it as an object. So you can't use Array.map(). Instead you can use something like below

{ Object.values(events.events).map(event =>(
    <div key={event.ID}> 
     <p>{event.name} </p>
    </div>))
}

Object.values(yourObject) gets you the values of all the keys in yourObject as an array.

edited Jun 15, 2021 at 10:44

Tushar Shahi

21.6k2 gold badges25 silver badges48 bronze badges

answered Jun 15, 2021 at 10:35

Sifat Amin

1,1929 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rahul Kumar · Accepted Answer · 2021-06-15 10:53:48Z

You can use Object.entries() which will return array of [key, value] pairs.

Alternatively you can also use other methods like Object.keys() and Object.values(). In below example I've used Object.entries() method.

const events = {
  "events": {
    "61": {
      "ID": "61",
      "NAME": "test_name_61",
      "EVENT_DATE": "30.06.2021 12:03:00",
      "MIN_PRICE": 1000
    },
    "70": {
      "ID": "70",
      "NAME": "test_name_70",
      "EVENT_DATE": "30.06.2021 12:03:00",
      "MIN_PRICE": 1100
    },
    "81": {
      "ID": "81",
      "NAME": "test_name_81",
      "EVENT_DATE": "30.06.2021 12:03:00",
      "MIN_PRICE": 2000
    }
  }
};

Object.entries(events.events).map(([key, event]) => {
  console.log(event);
});

React.js code:

{ Object.entries(events.events).map(([key, event]) => (
    <div key={event.ID}> 
     <p>{event.NAME} </p>
    </div>))
  ));
}

Avani Bataviya · Accepted Answer · 2021-06-15 10:39:36Z

0

you can try

Object.values(events).map((eventValue) => console.log(eventValue))

to get values

Object.keys(events).map((key) => console.log(key))

to get key

Object.entries(events).map((event) => console.log(event))

to get event as array

answered Jun 15, 2021 at 10:39

Avani Bataviya

7701 gold badge6 silver badges23 bronze badges

Collectives™ on Stack Overflow

React : How To Map this Array and Display it

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related