Angular JS/IONIC 讀取 JSON 文件
[英]Angular JS/IONIC Reading JSON FIle
問題描述
嗨，我有一個 angular js/ionic 項目，它正在調用 Yahoo! 返回以下 json 的金融網絡服務。
我嘗試使用 {{fiveDay.list[0].meta[0].type}} 拉動，但沒有效果
索引.html (
{{fiveDay.list[0].meta[0].type}}
是我需要正確的 JSON 參考的地方） <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <!DOCTYPE html> <html ng-app="starter"> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above <link href="css/ionic.app.css" rel="stylesheet"> --> <!-- ionic/angularjs js --> <script src="lib/ionic/js/ionic.bundle.js"></script> <!-- cordova script (this will be a 404 during development) --> <script src="cordova.js"></script> <!-- your app's js --> <script src="js/app.js"></script> </head> </h1> <body > <ion-pane> <ion-header-bar class="bar-dark"> <h1 class="title">Stock Profit Calculator</h1> </ion-header-bar> <ion-content> <div class="list" ng-controller="MainController"> <label class="item item-input item-stacked-label"> <b> <span class="input-label">Ticker Symbol:</span> </b> <input type="text" ng-model="ticker"> </label> <p>{{fiveDay.list.resources[0].resource.fields.price}}</p> <br> <label class="item item-input item-stacked-label"> <b> <span class="input-label">Allotment:</span></b> <input type="text" placeholder="0.00"> </label> </ion-content> </ion-pane> </body> </html>
應用程序.js：
{
"list" : {
"meta" : {
"type" : "resource-list",
"start" : 0,
"count" : 1
},
"resources" : [
{
"resource" : {
"classname" : "Quote",
"fields" : {
"name" : "Yahoo! Inc.",
"price" : "34.849998",
"symbol" : "YHOO",
"ts" : "1449608400",
"type" : "equity",
"utctime" : "2015-12-08T21:00:00+0000",
"volume" : "19852579"
}
}
}
]
}
}
我嘗試閱讀的 JSON 文件如下：
{ "list" : { "meta" : { "type" : "resource-list", "start" : 0, "count" : 1 }, "resources" : [ { "resource" : { "classname" : "Quote", "fields" : { "name" : "Yahoo! Inc.", "price" : "34.849998", "symbol" : "YHOO", "ts" : "1449608400", "type" : "equity", "utctime" : "2015-12-08T21:00:00+0000", "volume" : "19852579" } } } ] } }
1 個解決方案
解決方案1
2 2015-12-09 01:49:10
您正在調用.success()兩次：
return $http.get('http://finance.yahoo.com/webservice/v1/symbols/YHOO/quote?format=json')
.success(function(data) {
return data;
})
...
stocks.success(function(data) {
$scope.stockVariable = data;
});
我建議簡單地從您的工廠退回承諾：
return $http.get('...');
...
stocks.then(function(data) { $scope.stockVariable = data; });
編輯：
list和meta都不是數組：
{
"list":{
"meta":{
"type":"resource-list",
"start":0,
"count":1
},
"resources":[
{
"resource":{
"classname":"Quote",
"fields":{
"name":"Yahoo! Inc.",
"price":"34.849998",
"symbol":"YHOO",
"ts":"1449608400",
"type":"equity",
"utctime":"2015-12-08T21:00:00+0000",
"volume":"19852579"
}
}
}
]
}
}
只有帶方括號的值才是數組，這意味着只有resources才是數組。 因此，要訪問price ，您需要執行以下操作：
$scope.prices = fiveDay.list.resources
.map(function(item) {
return item.resource.fields.price;
});
或者，如果你真的只得到一個：
$scope.price = fiveDay.list.resources[0].resource.fields.price;
Angular.js不讀取JSON文件
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.