文章/答案/技术大牛

发布

社区首页 >问答首页 >Angular JS/IONIC Reading JSON FIle

问Angular JS/IONIC Reading JSON FIle
EN

Stack Overflow用户

提问于 2015-12-09 09:32:42

回答 1查看 631关注 0票数 2

嗨，我有一个angular js/ionic项目，正在调用一个雅虎！finance，它返回以下json。我试图在我的index.html上显示它，但是它无法呈现JSON数据，我如何在我的角度中引用从JSON中拉出“价格”："34.849998“？

我尝试使用{{fiveDay.list.meta.type}}拉取，但不起作用

index.html (

是我需要正确的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"
}
}
}

]
}
}

javascript

angularjs

json

ionic

回答 1

Stack Overflow用户

发布于 2015-12-09 09:49:11

您正在调用.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;

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34169258

复制

相似问题

问Angular JS/IONIC Reading JSON FIle
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular JS/IONIC Reading JSON FIleEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angular JS/IONIC Reading JSON FIle
EN