个人中心
gpt4 book ai didi

javascript - Angular JS/IONIC 读取 JSON 文件

转载 作者：行者123 更新时间：2023-11-29 21:38:21 25 4
gpt4 key购买 nike

您好，我有一个调用 Yahoo! 的 angular js/ionic 项目。返回以下 json 的金融网络服务。我试图在我的 index.html 上显示它但是它无法呈现 JSON 数据我如何在我的 Angular 中引用以从 JSON 中提取“价格”:“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>

应用程序.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; 
  });

我建议简单地退回你们工厂的 promise :

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;

关于javascript - Angular JS/IONIC 读取 JSON 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34169258/

25 4 0
文章推荐： mysql - WordPress ajax从自定义表中获取数据
文章推荐： 从处理程序调用 web 服务后，Android alertdialog 显示多次
文章推荐： MySql - 三个表由一个表中的一列连接和分组
文章推荐： javascript - 如何同步angular js中的函数命令
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com