如何将多个 API 调用响应传递给前端和循环答案

【问题标题】：How to pass multiple API call response to frontend and loop如何将多个 API 调用响应传递给前端和循环
【发布时间】：2019-01-19 16:29:19
【问题描述】：

我是 javascript 新手，试图在网上找到答案，但卡在这里。

尝试使用 Google Places API 通过“Promise”函数获取多个位置的数据，然后仅提取所有位置的“评论”部分。将结果渲染到前端后，我得到：

[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象],[对象对象]

如果我console.log(results)，我可以在终端看到结果，但在前端只能得到多个[object Object]。

app.js 文件：

var express = require("express");
var app = express();
var request = require("request");
var bodyParser = require("body-parser");

//APP CONFIG
app.set("view engine", "ejs");
app.use(express.static("public"));
app.use(bodyParser.urlencoded({extended: true}));


// fakes request
function request(url, cb) {
  setTimeout(() => cb(null, 200, `{"Search": "success for ${url}" }`), 200)
}


let locations = ['ChIJd5X4zalZwokR8HwFrpqhZTM', 'ChIJUQgmLP5YwokRaXhfzBfk0wY', 'ChIJ34UGSqNZwokR8PYj2UiNZ2k']

// promisesArray will hold all the promises created in map()
app.get("/resultspage", function(req, res){
  let promisesArray = locations.map(location => {
  // make a new promise for each element of cities
  return new Promise((resolve, reject) => {
    let url = 'https://maps.googleapis.com/maps/api/place/details/json?key=APIKEYHERE&placeid=' + location
    request(url, function(error, response, body) {
      if (error) {
        reject(error);
      }
      var data = JSON.parse(body)
      var results = data.result.reviews;
      // resolve once we have some data
      resolve(results);
    });
  })
})
Promise.all(promisesArray)
  .then(function(results) {
    console.log(results)
      res.render("resultspage", {data: results});
  })
  .catch(function(error) {
    console.log(error)

  })
})


app.listen(process.env.PORT, process.env.IP, function(){
    console.log("app has started!!");
});

resultspage.ejs 文件

<h1>Results Page</h1>

<%= data %>

以下是 Google 地方详情网页的链接： https://developers.google.com/places/web-service/details

谢谢！

【问题讨论】：

我认为您只需要在前端使用 JSON.stringify 将其“重新打包”即可。
谢谢。如果我使用 JSON，我会得到乱七八糟的文本，如下链接所示：textuploader.com/d7sqp
谢谢。如果我使用，我会得到凌乱的文本，如下面的链接：textuploader.com/d7sqp 所以它基本上是一个包含 3 个数组的数组，每个数组都有 5 个对象。如果我只需要从 3 个位置（总共 15 个作者姓名）中的每一个的每个评论中提取 author_name，我应该在前端使用什么代码？

标签： javascript arrays node.js api promise

【解决方案1】：

排队

<%= data %>

EJS 期望两个括号之间有一个字符串。您已经将其传递给了一个对象数组，该数组被字符串化以产生您所看到的内容。相反，您可以尝试解压，直到将所需的字段放入一个巨大的字符串中：

<%= data.map(review => review.author_name).join(',') %>

（或者，当然，您可以让我的 map-and-join 函数更复杂，以添加 HTML 标记和样式。）

【讨论】：

感谢您的建议，我想我应该能够弄清楚。使用此代码：
reviews[i].text ).join(' , ') % >