node.js - 如何在node.js中渲染html格式(openweathermap.api)

标签 node.js express pug weather

这是我下面的代码。我想要做的是,当我渲染时,我想将 html 格式渲染为 index.pug 而不使用 res.send(body); 当我输入邮政编码时,类似以下链接的结果将显示在index.pug 中的文本下方。

正文是这个链接。此链接是用 html 设计的,而不是图像。

link I want to use

主题.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);
          }
       });
    })

索引.pug

h1= text

最佳答案

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

1。获取多个值

API spec说你可以串多个 city ID在一起但不是邮政编码。如果您想在 route 保持轻松,您应该切换到城市 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传递到您的模板中,您就会发现创建表格非常容易。

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 - 如何在node.js中渲染html格式(openweathermap.api),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52583602/

相关文章:

node.js - 如何用express解析JWT?

node.js - Nodejs Express 使用表单中的数据查询 mongolab 以获取单个条目

javascript - 在express.js中为每个请求设置全局res.local变量

html - 音频不在 html 中播放

javascript - 异步更改 javascript 函数/"class"的参数?

node.js - 编辑组件 html 时 Angular CLI 不会重新加载?

php - 如何比较 Node.js 与 Apache 上的 PHP 的性能

node.js - 在提示中间中断的对话框仅从提示步骤开始处恢复

javascript - Mongoose 和 express : POST data from subdocument

javascript - Jade 没有正确渲染流体宽度等距的 div