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

我開始使用node.js，並且正在通過Ping Accuweather API並返回一個JSON blob數據的教程。需要幫助消化使用express-handlebars返回的JSON blob node.js

我幾乎得到了它......但顯示片是什麼拖我：

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的一些「數據」塊？

FYI這裏是那裏回來，我從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' ] } ]

來源

2016-12-31 Jay Aigner

將變量傳遞給意見的方式得到的是作爲第二個對象參數的屬性JSON的博客，所以更改此：

res.render('home', data);

要這樣：

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

Source。

至於顯示數據，你可以遍歷JSON數組之上，並且home.hbs這樣顯示的：關於each幫手

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

更多信息可以在this page找到。

來源

2016-12-31 01:40:55 leroydev

好了，所以你必須爲：

res.render('home', data)

我相信它應該是：

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

爲您的HTML

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

來源

2016-12-31 01:45:05

感謝您的快速回復！ https://github.com/jaybird1905/nodejstest這是我的回購。我現在得到這個時，我去本地主機：錯誤：缺少幫手：「this.Rank：」在對象。 –

@JayAigner這就是在你的home.hbs文件中，你有「Rank：{{this.Rank：385}}」。我需要只是Rank：{{this.Rank}} –

@JayAigner我也提交了更改到您的回購。您可以合併它並將其拉下，或者只是自己修復該行。此外，如果這解決了您的問題，請點擊複選標記 –

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

回答

相關問題