Question

嗨我有一个角度js /离子项目正在调用Yahoo!财务webservice正在返回以下json ..我试图在我的index.html上显示它但是它无法呈现JSON数据我怎样才能在我的角度中引用＆＃34;价格＆＃34; ：＆＃34; 34.849998＆＃34;来自JSON？

我尝试使用{{fiveDay.list [0] .meta [0] .type}}进行拉动工作

index.html（

是我需要正确的JSON参考的地方）

＆＃13;

$order

＆＃13;

app.js：

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

我尝试阅读的JSON文件如下：

// 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; 
            }); 
}]);

Answer 1

您正在拨打.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 / IONIC阅读JSON FIle

1 个答案: