AngularJS 从深度嵌套的 jsonp 渲染答案

【问题标题】：AngularJS rendering from deeply nested jsonpAngularJS 从深度嵌套的 jsonp 渲染
【发布时间】：2016-02-08 18:00:41
【问题描述】：

我是 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（部分）。我正在尝试访问每个资源的“名称”、“价格”和“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> 中呈现？？

【问题讨论】：

尝试使用浏览器调试器或日志看看是否正确得到响应
@Dvir 谢谢。转储所有 XML 内容的控制器不会引发异常。当我尝试指定字段（上图）时，出现以下错误：TypeError: Cannot read property 'resources' of undefined at app.js:9 at angular.js:8950 at deferred.promise.then.wrappedCallback (angular.js:6846) at angular.js:6883 at Object.$get.Scope.$eval (angular.js:8057) at Object.$get.Scope.$digest (angular.js:7922) at Object.$get.Scope.$apply (angular.js:8143) at done (angular.js:9170) at completeRequest (angular.js:9333) at angular.js:9261
检查data.results后是否添加console.log(data.results)

标签： javascript json angularjs jsonp

【解决方案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

【讨论】：

谢谢，效果很好。就像我说的那样，我是 Angular 的新手（我来自 Rails）。我试图找到一个 DRYer 解决方案，在控制器中尽可能地改进。但是，嘿，这行得通！
您好，我倾向于将 JS 代码用于所需的流程和视图进行访问，但如果您想简化视图中的访问，我做了一些修改，以便从查看，它在这个 plnkr 中：plnkr.co/edit/wLQEjbSL4wbhA1qDrhUP?p=preview