node.js - 如何为嵌套在多个数组和对象中的对象显示 forEach

Question

如果其他地方有答案，我深表歉意，请重定向我。我正在使用 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。从 postman 内部看到，它看起来像这样......

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 对象的正确语法即可。

Answer 1

根据您的代码，media.items 是一个数组。因此，每个媒体可能有多个项目和照片。如果您想显示第一个项目照片，您应该使用此代码

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

如果您在 media 中有多个项目并希望将它们全部显示，则必须像这样循环 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>
  <% }) %>