我开始使用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>
我用谷歌搜索了,并没有真正找到一个很好的解决方案。我已经看过车把帮助了功能......但是没有真正想出任何东西。
我如何开始展示一些数据&#39;从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' ] } ]
答案 0 :(得分:0)
将变量传递给视图的方法是第二个对象参数的属性,因此请更改:
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
帮助程序的更多信息,请访问this page。
答案 1 :(得分:0)
好的,所以你有:
res.render('home', data)
我认为应该是:
res.render("home", {data:data})
至于您的HTML
{{#each data}}
<div>
Name: {{this.LocalizedName}}
Rank: {{this.Rank}}
</div>
{{/each}}