How to display forEach for an object nested inside multiple arrays and objects

Question

I apologize if answers exist elsewhere, please redirect me. I'm using node.js, express, & ejs.

server.js

//API v4//media
const mediaAPI = { method: 'GET',
url: 'https://api.media.com/v4/media',  
  qs: 
   { access_token: 'abc123'
     }    
  };

//media data 
app.get('/media', function (req, res) {

  try {
    request(mediaAPI, function (error, response, body) {
        if (error) throw new Error(error);
        const mediaphotos = JSON.parse(body);
        const mediaphotolist = mediaphotos.response.checkins.items.map(item => item );

        res.render('media.ejs', {mediaphotolist}); 
        console.log(mediaphotolist);
      });   
  } catch(e) {
    console.log("Something went wrong", e)
  }
  });

Based on this code, I can see the following array in my console.log(mediaphotolist). Please note, there are multiple items returned, I'm only showing one to save space.

[ { uid: 123456789,
    person:
     { uid: 1234,
       first_name: 'frank',
       last_name: 'doe',
       contact: [Object] },
    house:
     { hid: 5724,
       house_name: 'Peterson House',
       house_style: 'Modern' },
    neighborhood:
     { nid: 379,
       neighborhood_name: 'Dexter',
       neighborhood_type: 'Old' },
    media: { count: 1, items: [Array] }
} ]

There is an image URL inside of the media: [Array] that I want to get. As seen inside postman, it looks like this...

media: {
        count: 1,
        items: [
          {
            photo_id: 1234,
            photo: {
                photo_img_sm: https://media.net/photos/123_200x200.jpg,
                photo_img_md: https://media.net/photos/456_640x640.jpg,
                photo_img_lg: https://media.net/photos/789_1280x1280.jpg
                     }
                 }
              ]
        }

In my media.ejs file I have the following ejs code to display first_name and photo_img_sm...

media.ejs

<ul>
  <% mediaphotolist.forEach(function(photoofhouse){ %>
    <div>
      <li>
        <p>First Name: <%= photoofhouse.person.first_name %></p>
        <img src= "<%= photoofhouse.media.items.photo.photo_img_sm %>" alt="">
      </li>
    </div>
  <% }) %>
</ul>

I can make the first_name show using the ejs script seen above, but, I don't know know to dig deeper to get the photo_img_sm object that lives within these nested arrays and objects. I'm hoping I don't have to change my server side code and simply learn the proper syntax for accessing this photo_img_sm object.

dimitris tseggenes · Accepted Answer · 2019-10-25 23:11:36Z

1

According to your code, media.items is an array. So every media may have more than one items and photos. If you want to display the first item photo you should use this code

<img src= "<%= photoofhouse.media.items[0].photo.photo_img_sm %>" alt="">

In case you have more than one items inside media and want to display them all, you have to loop the media.items array like this:

<% mediaphotolist.forEach(function(photoofhouse){ %>
    <div>
      <li>
        <p>First Name: <%= photoofhouse.person.first_name %></p>
        <% photoofhouse.media.items.forEach(function(el){ %>
            <img src= "<%= el.photo.photo_img_sm %>" alt="">
        <% }) %>
      </li>
    </div>
  <% }) %>

edited Oct 25, 2019 at 23:11

answered Oct 25, 2019 at 23:06

dimitris tseggenes

3,1962 gold badges20 silver badges25 bronze badges

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

2 Comments

Redink Over a year ago

you rock! This worked very well, interesting so if I had more arrays further in, I would add another forEach like so<% el.foo.items.forEach(function(bar){ %>? (assuming the next array is also items)

dimitris tseggenes Over a year ago

yes you could do this in case your data had that schema

user11720628 · Accepted Answer · 2019-10-25 23:03:29Z

I've used this as an example hope you can apply it to your scenario say you the variable is named bg hence

let bg = [ { uid: 123456789,
person:
 { uid: 1234,
   first_name: 'frank',
   last_name: 'doe',
   contact: [Object] },
house:
 { hid: 5724,
   house_name: 'Peterson House',
   house_style: 'Modern' },
neighborhood:
 { nid: 379,
   neighborhood_name: 'Dexter',
   neighborhood_type: 'Old' },
media:   {       
    items: [
      {
        photo_id: 1234,
        photo: {
            photo_img_sm: 'https://media.net/photos/123_200x200.jpg',
            photo_img_md: 'https://media.net/photos/456_640x640.jpg',
            photo_img_lg: 'https://media.net/photos/789_1280x1280.jpg'
                 }
             }
          ]
    }} ]

You could access the photos like this

bg[0].media["items"][0]["photo"]

or using the dot notation

bg[0].media["items"][0].photo

if there were multiple items like you said you have

let gb = [ { uid: 123456789,
    person:
     { uid: 1234,
       first_name: 'frank',
       last_name: 'doe',
       contact: [Object] },
    house:
     { hid: 5724,
       house_name: 'Peterson House',
       house_style: 'Modern' },
    neighborhood:
     { nid: 379,
       neighborhood_name: 'Dexter',
       neighborhood_type: 'Old' },
    media:   {       
        items: [
          {
            photo_id: 1234,
            photo: {
                photo_img_sm: 'https://media.net/photos/123_200x200.jpg',
                photo_img_md: 'https://media.net/photos/456_640x640.jpg',
                photo_img_lg: 'https://media.net/photos/789_1280x1280.jpg'
                     }
                 }
              ]
        }
} ,{ uid: 123456789,
    person:
     { uid: 1234,
       first_name: 'frank',
       last_name: 'doe',
       contact: [Object] },
    house:
     { hid: 5724,
       house_name: 'Peterson House',
       house_style: 'Modern' },
    neighborhood:
     { nid: 379,
       neighborhood_name: 'Dexter',
       neighborhood_type: 'Old' },
    media:   {       
        items: [
          {
            photo_id: 1234,
            photo: {
                photo_img_sm: 'https://media.net/photos/123_200x200.jpg',
                photo_img_md: 'https://media.net/photos/456_640x640.jpg',
                photo_img_lg: 'https://media.net/photos/789_1280x1280.jpg'
                     }
                 }
              ]
        }
},{ uid: 123456789,
    person:
     { uid: 1234,
       first_name: 'frank',
       last_name: 'doe',
       contact: [Object] },
    house:
     { hid: 5724,
       house_name: 'Peterson House',
       house_style: 'Modern' },
    neighborhood:
     { nid: 379,
       neighborhood_name: 'Dexter',
       neighborhood_type: 'Old' },
    media:   {       
        items: [
          {
            photo_id: 1234,
            photo: {
                photo_img_sm: 'https://media.net/photos/123_200x200.jpg',
                photo_img_md: 'https://media.net/photos/456_640x640.jpg',
                photo_img_lg: 'https://media.net/photos/789_1280x1280.jpg'
                     }
                 }
              ]
        }
},{ uid: 123456789,
    person:
     { uid: 1234,
       first_name: 'frank',
       last_name: 'doe',
       contact: [Object] },
    house:
     { hid: 5724,
       house_name: 'Peterson House',
       house_style: 'Modern' },
    neighborhood:
     { nid: 379,
       neighborhood_name: 'Dexter',
       neighborhood_type: 'Old' },
    media:   {       
        items: [
          {
            photo_id: 1234,
            photo: {
                photo_img_sm: 'https://media.net/photos/123_200x200.jpg',
                photo_img_md: 'https://media.net/photos/456_640x640.jpg',
                photo_img_lg: 'https://media.net/photos/789_1280x1280.jpg'
                     }
                 }
              ]
        }
},{ uid: 123456789,
    person:
     { uid: 1234,
       first_name: 'frank',
       last_name: 'doe',
       contact: [Object] },
    house:
     { hid: 5724,
       house_name: 'Peterson House',
       house_style: 'Modern' },
    neighborhood:
     { nid: 379,
       neighborhood_name: 'Dexter',
       neighborhood_type: 'Old' },
    media:   {       
        items: [
          {
            photo_id: 1234,
            photo: {
                photo_img_sm: 'https://media.net/photos/123_200x200.jpg',
                photo_img_md: 'https://media.net/photos/456_640x640.jpg',
                photo_img_lg: 'https://media.net/photos/789_1280x1280.jpg'
                     }
                 }
              ]
        }
}]

You could iterate through each and still access the photo variable like so

gb.forEach(onePhoto =>{ for (d in onePhoto["media"]['items'][0].photo){console.log(onePhoto["media"]['items'][0].photo[d])}})

Collectives™ on Stack Overflow

How to display forEach for an object nested inside multiple arrays and objects

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related