Как отобразить forEach для объекта, вложенного в несколько массивов и объектов - PullRequest
Новая
       19

Как отобразить forEach для объекта, вложенного в несколько массивов и объектов

1 голос
/ 26 октября 2019

Я прошу прощения, если ответы существуют в другом месте, пожалуйста, перенаправьте меня. Я использую 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)
  }
  });

На основе этого кода я вижу следующий массив в моемconsole.log (mediaphotolist). Обратите внимание, что возвращено несколько элементов, я показываю только один для экономии места. 

[ { 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] }
} ]

URL-адрес изображения внутри носителя: [Array] , который я хочуполучить. Как видно внутри почтальона, это выглядит так ... 

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
                     }
                 }
              ]
        }

В моем файле media.ejs у меня есть следующий код ejs для отображения first_name и 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>

Я могу сделать показ first_name, используя скрипт ejs, показанный выше, но я не знаю, как копать глубже, чтобы получить объект photo_img_sm, который живет в этих вложенных массивахи объекты. Я надеюсь, что мне не нужно менять свой код на стороне сервера и просто изучать правильный синтаксис для доступа к этому объекту photo_img_sm.

Ответы [ 2 ]

1 голос
/ 26 октября 2019

Согласно вашему коду, media.items - это массив. Таким образом, каждый носитель может иметь более одного элемента и фотографии. Если вы хотите отобразить фотографию первого элемента, вы должны использовать этот код 

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

. Если у вас есть более одного элемента в медиа и вы хотите отобразить их все, вы должны зациклить массив media.items какэто: 

<% 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>
  <% }) %>
0 голосов
/ 26 октября 2019

Я использовал это в качестве примера, надеюсь, что вы можете применить его к своему сценарию, скажем, что переменная называется bg, следовательно 

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'
                 }
             }
          ]
    }} ]

Вы можете получить доступ к таким фотографиям 

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

или с использованием точечной нотации 

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

, если было несколько элементов, как вы сказали, что у вас есть 

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'
                     }
                 }
              ]
        }
}]

Вы можете перебирать каждый из них и по-прежнему получать доступ к переменной photo, например 

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