需要帮助消化使用express-handlebars node.js返回的JSON blob
我正在开始使用node.js，并正在通过一个教程来指导Accuweather API并返回一个JSON数据块。
我几乎得到了它…但显示片是什么阻止我：
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>
我谷歌search，并没有真正find一个很好的解决scheme。 我已经看着把手帮助function…但没有真正拿出任何东西。
我将如何开始显示来自Accuweather API的一些“数据”块？
仅供参考这里有JSON博客回来，我从console.logging它
[ { 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' ] } ]
好的，所以你有：
res.render('home', data)
我相信它应该是：
res.render("home", {data:data})
至于你的HTML
{{#each data}} <div> Name: {{this.LocalizedName}} Rank: {{this.Rank}} </div> {{/each}}
将variables传递给视图的方式是作为第二个对象参数的属性，所以更改这个：
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帮手的更多信息可以在此页面find。