Question

我是JSON和AngularJS的新手。我正在尝试访问深度嵌套的远程json文件中的数据元素。我可以设法在我的视图中呈现整个JSON结果。但是，我似乎无法定位JSON内部数组中的元素。它来自雅虎货币。

这是我的控制器和视图，它呈现整个JSON文件：

控制器

var app = angular.module('app', []);

app.controller('DataCtrl', function ($scope, $http) {
    $http.jsonp('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fwebservice%2Fv1%2Fsymbols%2Fallcurrencies%2Fquote%3Fformat%3Djson%22&format=jsonp&callback=JSON_CALLBACK').success(function (data) {

        $scope.data = data;
    });
});

查看

<!doctype html>
<html ng-app="app" >
<head>
  <meta charset="utf-8">
  <title>LIVE</title>
  <!-- <link rel="stylesheet" href="style.css"> -->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="DataCtrl">
  <h1>Live from JSON feed</h1>
  <ul>
    <li ng-repeat="row in data">
      {{ data }}
    </li>
  </ul>
</body>
</html>

我试着写这样的控制器：

var app = angular.module('app', []);

app.controller('DataCtrl', function ($scope, $http) {
    $http.jsonp('https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20json%20where%20url%3D%22http%3A%2F%2Ffinance.yahoo.com%2Fwebservice%2Fv1%2Fsymbols%2Fallcurrencies%2Fquote%3Fformat%3Djson%22&format=jsonp&callback=JSON_CALLBACK').success(function (data) {
            var pair = { name };
        // $scope.data = data;
        if(data) {
            if (data.results) {
                pair.name = data.results.list.resources[0].resource.fields.name;
            }
        }
    });
});

但这不起作用。这是JSON（部分）..我正在尝试访问每个资源的“name”，“price”和“utctimestamp”字段：

{
  "query": {
    "count": 1,
    "created": "2015-11-07T05:42:03Z",
    "lang": "en-US",
    "diagnostics": {
      "publiclyCallable": "true",
      "url": {
        "execution-start-time": "0",
        "execution-stop-time": "23",
        "execution-time": "23",
        "content": "http://finance.yahoo.com/webservice/v1/symbols/allcurrencies/quote?format=json"
      },
      "user-time": "25",
      "service-time": "23",
      "build-version": "0.2.311"
    },
    "results": {
      "list": {
        "meta": {
          "type": "resource-list",
          "start": "0",
          "count": "173"
        },
        "resources": [
          {
            "resource": {
              "classname": "Quote",
              "fields": {
                "name": "USD/KRW",
                "price": "1152.994995",
                "symbol": "KRW=X",
                "ts": "1446874620",
                "type": "currency",
                "utctime": "2015-11-07T05:37:00+0000",
                "volume": "0"
              }
            }
          },
          {
            "resource": {
              "classname": "Quote",
              "fields": {
                "name": "SILVER 1 OZ 999 NY",
                "price": "0.068046",
                "symbol": "XAG=X",
                "ts": "1446850711",
                "type": "currency",
                "utctime": "2015-11-06T22:58:31+0000",
                "volume": "100"
              }
            }
          },
          {
            "resource": {
              "classname": "Quote",
              "fields": {
                "name": "USD/VND",
                "price": "22364.000000",
                "symbol": "VND=X",
                "ts": "1446874620",
                "type": "currency",
                "utctime": "2015-11-07T05:37:00+0000",
                "volume": "0"
              }
            }
          },
    ...

对于它的价值，当我将 callback = JSON_CALLBACK 附加到url时， jsonp 似乎会返回某种类似xml的内容，如下所示：

JSON_CALLBACK({"query":{"count":"1","created":"2015-11-07T16:08:29Z","lang":"en-US"},"results":["<list><meta><type>resource-list</type><start>0</start><count>173</count></meta><resources><resource><classname>Quote</classname><fields><name>USD/KRW</name><price>1152.994995</price><symbol>KRW=X</symbol><ts>1446900900</ts><type>currency</type><utctime>2015-11-07T12:55:00+0000</utctime><volume>0</volume></fields></resource></resources><resources><resource><classname>Quote</classname><fields><name>SILVER 1 OZ 999 NY</name><price>0.068046</price><symbol>XAG=X</symbol><ts>1446850711</ts><type>currency</type><utctime>2015-11-06T22:58:31+0000</utctime><volume>100</volume></fields></resource></resources><resources><resource>
...

我是如何使用JSONp的？我将数据集渲染到我的视图（上图），但它都是在时髦的xml语法中。如何抓住我需要的3个值到一个数组并在<ul>中进行渲染

Answer 1

您可以使用原始控制器，只在视图中出现问题。如果用这个代替它，它会起作用：

<!doctype html>
<html ng-app="app" >
    <head>
        <meta charset="utf-8">
        <title>LIVE</title>
        <!-- <link rel="stylesheet" href="style.css"> -->
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
        <script src="script.js"></script>
    </head>
    <body ng-controller="DataCtrl">
        <h1>Live from JSON feed</h1>
        <ul>
            <li ng-repeat="res in data.query.results.list.resources">
                {{ res.resource.fields.name }}: {{ res.resource.fields.price }}, {{ res.resource.fields.utctime }}
            </li>
        </ul>
    </body>
</html>

以下是使用您的JSON示例的Plunker：http://plnkr.co/edit/wzF5t9dTZt49n5eq9N1L?p=preview

AngularJS从深度嵌套的jsonp渲染

1 个答案: