时间戳

首页 > 解决方案 > 如何为嵌套在多个数组和对象中的对象显示 forEach

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

问题描述

如果其他地方存在答案，我深表歉意，请重定向我。我正在使用 node.js、express 和 ejs。

服务器.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 ...

媒体.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.jsexpressforeachejs

解决方案

根据您的代码，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>
  <% }) %>

推荐阅读