如何显示嵌套在多个数组和对象中的对象的forEach

问题描述 投票：1回答：2

我很抱歉其他地方是否有答案，请重定向我。我正在使用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] }
} ]

我想要获得的media：[Array]内部有一个图像URL。正如邮递员内部所看到的，看起来像这样...

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>

我可以使用上面看到的ejs脚本显示first_name，但是，我不知道要深入研究以获取驻留在这些嵌套数组和对象中的photo_img_sm对象。我希望不必更改服务器端代码，而只需学习访问此photo_img_sm对象的正确语法。

node.js express foreach ejs
2个回答
0
投票
我已经以此为例，希望您可以将其应用于您的情况，例如您将变量命名为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'
                     }
                 }
              ]
        }
}]

您可以遍历每个变量，仍然可以访问照片变量像这样
gb.forEach(onePhoto =>{ for (d in onePhoto["media"]['items'][0].photo){console.log(onePhoto["media"]['items'][0].photo[d])}})
0
投票
根据您的代码，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>
  <% }) %>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.