Angular JS/IONIC閱讀JSON文件

嗨我有一個角度js /離子項目，稱爲雅虎！財務webservice這是返回以下json ..我想顯示它在我的index.html但它無法呈現JSON數據我怎麼能在我的角度引用拉「價格」：「34.849998」從JSON？Angular JS/IONIC閱讀JSON文件

我嘗試使用拉{{fiveDay.list [0] .META [0] .TYPE}}該diidnt工作

的index.html（

是其中i需要適當的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> 
 
\t 
 
     <!-- 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"> \t \t  
 
       <label class="item item-input item-stacked-label"> 
 
       <b> <span class="input-label">Ticker Symbol:</span> </b> 
 
       <input type="text" ng-model="ticker"> 
 
       </label> 
 
\t \t \t <p>{{fiveDay.list.resources[0].resource.fields.price}}</p> 
 
         
 
\t \t \t  <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>

app.js：

// Ionic Starter App 

// angular.module is a global place for creating, registering and retrieving Angular modules 
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html) 
// the 2nd parameter is an array of 'requires' 
var app = angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
    $ionicPlatform.ready(function() { 
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard 
    // for form inputs) 
    if(window.cordova && window.cordova.plugins.Keyboard) { 
     cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 
    } 
    if(window.StatusBar) { 
     StatusBar.styleDefault(); 
    } 
    }); 
}) 

app.controller('MainController', ['$scope', 'stocks', function($scope, stocks) { 
//$scope.ticker = 'Bad Guy KUTA'; 
stocks.success(function(data) { 
    $scope.fiveDay = data; 
    }); 



}]); 


app.factory('stocks', ['$http', function($http) { 
    return $http.get('http://finance.yahoo.com/webservice/v1/symbols/YHOO/quote?format=json') 
      .success(function(data) { 
       return data; 
      }) 
      .error(function(err) { 
       return err; 
      }); 
}]);

JSON文件我是tryign閱讀如下：

{ 
"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" 
} 
} 
} 

] 
} 
}

來源

2015-12-09 BadGuyKUTA

你能描述關於「無法呈現」更多的細節？有沒有錯誤信息？ – yukuan

無法呈現，因爲我沒有得到字符串「資源列表」，而是我只看到角度js調用我stockVariable.list.meta.type – BadGuyKUTA

要調用.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;

來源

2015-12-09 01:49:10

一切工作正常我認爲這是我如何試圖讀取數據從JSON文檔中，所以我的JSON路徑...什麼是正確的方式來引用「價格」：「34.849998」通過角？ – BadGuyKUTA

查看我的編輯進行更新。 –

奇數我試圖$ scope.price = fiveDay.list.resources [0] .resource.fields.price仍然無法顯示它......看我原來的帖子編輯 – BadGuyKUTA

Angular JS/IONIC閱讀JSON文件

回答

相關問題