Angular JS/IONIC读取JSON文件

Angular JS/IONIC Reading JSON FIle

本文关键字：JSON 文件 读取 IONIC JS Angular      更新时间：2023-09-26

嗨，我有一个angular js/ionic项目，它正在调用Yahoo！财务Web服务，返回以下json。。我试图在我的index.html上显示它，但它无法呈现JSON数据。我如何在我的角度中引用它来从JSON中提取"price"："34.849998"？

我尝试使用不起作用的｛｛fiveDay.list[0].meta[0].type｝｝

index.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>

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文件如下：

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

您正在调用.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;
相关文章：