需要帮助来消化使用express-handlebars node.js返回的JSON blob

Question

我现在开始使用node.js，并正在完成一个可ping Accuweather API并返回JSON数据blob的教程。

我已经知道了...但是展示片让我反感：

index.js

const express = require('express')
const rp = require('request-promise')
const exphbs = require('express-handlebars')
const path = require('path')
const app = express()

app.engine('.hbs', exphbs({
  defaultLayout: 'main',
  extname: '.hbs',
  layoutsDir: path.join(__dirname, 'views/layouts')
}))
app.set('view engine', '.hbs')
app.set('views', path.join(__dirname, 'views'))

app.get('/:city', (req, res) => {
  rp({
      uri: 'http://apidev.accuweather.com/locations/v1/search',
      qs: {
    q: req.params.city,
    apiKey: 'hoArfRosT1215'
      // Use your accuweather API key here
  },
  json: true
})
.then((data) => {
  console.log(data)
  res.render('home', data)
})
.catch((err) => {
  console.log(err)
  res.render('error')
})
})

app.listen(3000)

home.hbs

  <h2>Success!</h2>
  <h2>{{data}}</h2>`

error.hbs

 <h2>Error<h2>

home.hbs

<html>
  <head>
    <title>Express handlebars</title>
  </head>
  <body>
    {{{body}}}
  </body>
</html>

我已经搜索过Google，还没有真正找到好的解决方案。 我研究了车把的辅助功能……但实际上并没有提出任何建议。

我将如何开始显示来自Accuweather API的一些“数据”块？

仅供参考，这是我从console.logging回来的JSON博客

[ { Version: 1,
    Key: '2156696',
    Type: 'City',
    Rank: 385,
    LocalizedName: 'Providence Forge',
    EnglishName: 'Providence Forge',
    PrimaryPostalCode: '19468',
    Region: 
     { ID: 'NAM',
       LocalizedName: 'North America',
       EnglishName: 'North America' },
    Country: 
     { ID: 'US',
       LocalizedName: 'United States',
       EnglishName: 'United States' },
    AdministrativeArea: 
     { ID: 'PA',
       LocalizedName: 'Pennsylvania',
       EnglishName: 'Pennsylvania',
       Level: 1,
       LocalizedType: 'State',
       EnglishType: 'State',
       CountryID: 'US' },
    TimeZone: 
     { Code: 'EST',
       Name: 'America/New_York',
       GmtOffset: -5,
       IsDaylightSaving: false,
       NextOffsetChange: '2017-03-12T07:00:00Z' },
    GeoPosition: { Latitude: 40.18, Longitude: -75.523, Elevation: [Object] },
    IsAlias: false,
    SupplementalAdminAreas: [ [Object] ],
    DataSets: [ 'Alerts', 'ForecastConfidence', 'MinuteCast' ] },
  { Version: 1,
    Key: '2172276',
    Type: 'City',
    Rank: 385,
    LocalizedName: 'Providence Forge',
    EnglishName: 'Providence Forge',
    PrimaryPostalCode: '23140',
    Region: 
     { ID: 'NAM',
       LocalizedName: 'North America',
       EnglishName: 'North America' },
    Country: 
     { ID: 'US',
       LocalizedName: 'United States',
       EnglishName: 'United States' },
    AdministrativeArea: 
     { ID: 'VA',
       LocalizedName: 'Virginia',
       EnglishName: 'Virginia',
       Level: 1,
       LocalizedType: 'State',
       EnglishType: 'State',
       CountryID: 'US' },
    TimeZone: 
     { Code: 'EST',
       Name: 'America/New_York',
       GmtOffset: -5,
       IsDaylightSaving: false,
       NextOffsetChange: '2017-03-12T07:00:00Z' },
    GeoPosition: { Latitude: 37.442, Longitude: -77.044, Elevation: [Object] },
    IsAlias: false,
    SupplementalAdminAreas: [ [Object] ],
    DataSets: [ 'Alerts', 'ForecastConfidence', 'MinuteCast' ] } ]

Answer 1

将变量传递到视图的方式是作为第二个对象参数的属性，因此请更改此方法：

res.render('home', data);

对此：

res.render('home', {data: data});

来源。

至于显示数据，您可以遍历JSON数组并将其显示在home.hbs如下所示：

<h2>Success!</h2>
<ul>
  {{#each data}}
    <li>
      Name: {{this.EnglishName}}<br>
      Region: {{this.Region.EnglishName}}
    </li>
  {{/each}}
</ul>

有关each助手的更多信息，请参见本页。

Answer 2

好的，您有：

 res.render('home', data)

我认为应该是：

res.render("home", {data:data})

至于你的HTML

  {{#each data}}
   <div>
      Name: {{this.LocalizedName}}
      Rank: {{this.Rank}}
   </div>
  {{/each}}

需要帮助来消化使用express-handlebars node.js返回的JSON blob

问题描述

2 个解决方案

解决方案1
0 2016-12-31 01:40:55

解决方案2
0 2016-12-31 01:45:05

需要帮助来消化使用express-handlebars node.js返回的JSON blob

问题描述

2 个解决方案

解决方案1 0 2016-12-31 01:40:55

解决方案2 0 2016-12-31 01:45:05

解决方案1
0 2016-12-31 01:40:55

解决方案2
0 2016-12-31 01:45:05