如何在 node.js (openweathermap.api) 中呈现 html 格式

Question

下面是我的代码。我想要做的是在渲染时，我想将 html 格式渲染为 index.pug 而不使用 res.send(body); 当我输入邮政编码时，如下所示的结果 link 将显示在 index.pug.

中的文本下方

body就是这个link。这个 link 是在 html 中设计的，而不是图像。

topic.js

 router.post('/weather', function(req,res){
      let url = `http://api.openweathermap.org/data/2.5/weather?zip=${req.body.zipcode}&mode=html&units=imperial&appid=${apiKey}`
      request(url, function (err, response, body) {
//this below code works but not what I wanna do           
res.send(body);
//this is something I'd like to use
res.render('index',text:body);
          }
       });
    })

index.pug

h1= text

Answer 1

您看到的第一个问题是调用 OpenWeather API 并且一次只获取一个邮政编码。让我们先解决这个问题，然后我们需要解决如何将数据有效地输入 pug 模板，您可以在其中生成 table.

1.获取多个值

API spec says that you can string multiple city ID 在一起但不是邮政编码。如果您想在路线中保持轻松，您应该切换到城市 ID：

http://api.openweathermap.org/data/2.5/group?id=524901,703448,2643743&units=metric

否则你将需要多次调用路由中的 api，这可以使用诸如 async 之类的库来实现，但你说你才刚刚开始编程，所以这可能不是一个好的第一步。

希望您的应用程序可以改用城市 ID，或者至少您可以从它开始。

2。将结果发送到模板

多城市查询的结果类似于 this:

{"cnt":3,"list":[{"coord":{"lon":37.62,"lat":55.75},"sys":{"type":1,"id":7323,"message":0.0036,"country":"RU","sunrise":1485753940,"sunset":1485784855},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"main":{"temp":-10.5,"pressure":1028,"humidity":66,"temp_min":-11,"temp_max":-10},"visibility":10000,"wind":{"speed":5,"deg":200},"clouds":{"all":0},"dt":1485793175,"id":524901,"name":"Moscow"},{"coord":{"lon":30.52,"lat":50.45},"sys":{"type":1,"id":7358,"message":0.0268,"country":"UA","sunrise":1485754480,"sunset":1485787716},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01n"}],"main":{"temp":-11.04,"pressure":1033,"humidity":61,"temp_min":-15,"temp_max":-9},"visibility":10000,"wind":{"speed":3,"deg":150},"clouds":{"all":0},"dt":1485793175,"id":703448,"name":"Kiev"},{"coord":{"lon":-0.13,"lat":51.51},"sys":{"type":1,"id":5091,"message":0.0034,"country":"GB","sunrise":1485762036,"sunset":1485794875},"weather":[{"id":701,"main":"Mist","description":"mist","icon":"50d"},{"id":300,"main":"Drizzle","description":"light intensity drizzle","icon":"09d"}],"main":{"temp":7,"pressure":1012,"humidity":81,"temp_min":5,"temp_max":8},"visibility":10000,"wind":{"speed":4.6,"deg":90},"clouds":{"all":90},"dt":1485793175,"id":2643743,"name":"London"}]}

您需要遍历 list 属性中的每个实体并提取所需的数据。下面是一个使用 for...of 的示例，它遍历结果，为每个城市创建一个新的更简单的对象，然后将其添加到 weatherData 数组。只需使用 res.render 将 weatherData 传递到您的模板中，您会发现创建 table.

非常容易

var weatherData = [];

for(var city in body.list){
  var cityWeather = {
    "name": city.name,
    "temperature": city.main.temp,
    "weather": city.weather[0].description
  };

  weatherData.push(cityWeather);

}

res.render('topic/weather', {"cities": weatherData});

如何在 node.js (openweathermap.api) 中呈现 html 格式

how to render html format in node.js (openweathermap.api)

weather

node.js

express

pug