Nested mapping reactjs

Question

I'm mapping a list of objects in my react app like follows

(countrydata !== null) ? Object.keys(countrydata).map((item, key) => {
  return (
    <img src={countrydata[item].image_location}/>
  )
})

I also have an array which has the exact number of objects as in the list of objects i have mapped above. I want to display a certain data that is in the objects of the array and i tried doing something like this

(countrydata !== null) ? Object.keys(countrydata).map((item, key) => {
  arrayOfObjects.map((arrayItem,key)=>{
    return (
      <div>
        <img src={countrydata[item].image_location}/>
        <span>{arrayItem.name}</span>
      </div>
    )
  })            
})

But couldn't achieve the result i wanted. How can i map the array of objects inside the mapping of objects list?

Edit:

My list of objects looks like this (countrydata)

place_1:{description:'',image_location:'',location:''}
place_2:{description:'',image_location:'',location:''}
place_3:{description:'',image_location:'',location:''}

My array of objects looks like this (arrayOfObjects)

0: {distance: {…}, duration: {…}, status: "OK"}
1: {distance: {…}, duration: {…}, status: "OK"}
2: {distance: {…}, duration: {…}, status: "OK"}

Could you please post a tiny example of the objects `countrydata` and `arrayOfObjects`? — ibrahim mahrir, Nov 10 '19 at 14:43
Are keys in the first object always like `place_N`? Can there be a missing number like `place_1, place_2, place_5`? The first object should really be an array of objects, that would make things a lot easier — ibrahim mahrir, Nov 10 '19 at 14:46
No.it's always go in ascending order. there won't be any missing number — CraZyDroiD, Nov 10 '19 at 14:48
@ibrahimmahrir i have done the object mapping part correctly. i just want to display the data in my array in a orderly fashion — CraZyDroiD, Nov 10 '19 at 14:48
it's not clear what you are trying to achieve with `arrayItem.name`, if `arrayOfObjects` only contains `distance`, `duration` and `status` (no name)... please be more precise about `the result i wanted` — Aprillion, Nov 10 '19 at 14:53
arrayItem.name was given as a example. Basically i'm getting a response from a API call which has 14 objects. And also i'm getting another response of an array which has 14 objects. I have mapped the objects in first response. What i want is to display distance and duration which are in the array of objects inside the mapped object(1st response) — CraZyDroiD, Nov 10 '19 at 14:59

ibrahim mahrir · Answer 1 · 2019-11-10T14:56:51.173

You don't need another nested map. You can map them both at the same time using only one map, you'll use the index provided to the callback to access the item from the other array/object.

BTW, since the order of object keys is unreliable, I suggest you map over the array arrayOfObjects and use the index to generate the key that you'll use to access the matching object from countrydata:

arrayOfObjects.map((arrayItem, index) => {
  let key = "place_" + (index + 1);                      // generate the key to access an object from 'countrydata'. If we are at the first object (index == 0), the key will be "place_1"
  return (
    <div>
      <img src={countrydata[key].image_location}/>       // access the matching object from 'countrydata' and use it
      <span>{arrayItem.name}</span>                      // access the current array item from 'arrayOfObjects'
    </div>
  );
})

Junius L · Answer 2 · 2019-11-10T16:05:48.410

0

You can combine the two arrays and merge the values from the second array.

const data = {
place_1: { name: 'One'},
place_2: { name: 'Two'},
place_3: { name: 'Three'},
};

const countrydata = [];

const locations = [{distance: {}, duration: {}, status: "OK"},
{distance: {}, duration: {}, status: "OK"},
{distance: {}, duration: {}, status: "OK"}]

Object.keys(data).forEach((key, index) => countrydata.push({ [key]: { ...data[key], distance: locations[index].distance, duration: locations[index].duration }}))

console.log(countrydata);

Then render the array like

countrydata.map((item, key) => {
 return (
  <div>
    <img src={countrydata['place_' + key].image_location}/>
    <span>{countrydata['place_' + key].name}</span>
  </div>
 )
})

edited Nov 10 '19 at 16:05

answered Nov 10 '19 at 15:27

Junius L

15,881
6
52
96

how to access the place_N ? here item means the object key right? – CraZyDroiD Nov 10 '19 at 15:55
item = the object ```{ "place_1": { "name": "One", "distance": {}, "duration": {} } }``` – Junius L Nov 10 '19 at 15:56
My arrayOfObjects has keys for each object. I have included how my array looks like . Please take a look. I have trouble accessing values because of that – CraZyDroiD Nov 10 '19 at 15:59
For example: 0: {distance: {…}, duration: {…}, status: "OK"} – CraZyDroiD Nov 10 '19 at 16:00
```0``` is a key? – Junius L Nov 10 '19 at 16:06

Nested mapping reactjs

2 Answers2