解析来自 JSON 的数据

Question

我正在 AJAX 调用包含缩略图和网站 URL 的 JSON 文件，然后我使用 AngularJS 指令 ng-repeat 列出每个文件。问题是缩略图和网站网址不再填充我的页面。我将我的 JSON 文件数据重新格式化为一个数组，因为我将向我的 JSON 文件添加多个数组，这些数组将包含要在整个网站的其他页面上使用的不同对象。

JSON:

{"websites":[
    {
        "thumbnail": "thumbnail1.jpg",
        "website": "http://somewebsite.com"
    },
    {
        "thumbnail": "thumbnail2.jpg",
        "website": "http://somewebsite.com"
    },
    {
        "thumbnail": "thumbnail3.jpg",
        "website": "http://somewebsite.com"
    }
]}

Angular:

angular.module('myApp')
.constant("dataUrl", "../json/data.json")
.controller("websitesController", function($scope, $http, dataUrl){
    $scope.data ={};

    $http.get(dataUrl)
        .success(function(data){
            $scope.data.projects = data;
        })
        .error(function(error){
            $scope.data.error = error;
        });
});

HTML:

<ul ng-controller="websitesController">     
                <li ng-repeat="item in data.projects">

                <img ng-src="{{item.thumbnail}}" />

                <div>
                <a ng-href="{{item.website}}" target="_blank"><b>Website</b></a>
                </div>
                </li>
<ul>

Answer 1

应该是$scope.data.projects=data.websites;

Answer 2

您的 JSON 数据有一个名为 websites 的键，用于存储一组网站。您正在使用 websites 键添加该对象作为您的 $scope.data.projects。要访问网站数组，您需要查看该对象，即，您应该将 $scope.data.projects 分配给 data.websites。 按如下方式更改您的成功处理程序：

.success(function(data){
  $scope.data.projects = data.websites;
})

编辑：数据示例--

您的回复 data 如下所示：

{"websites":[
    {
        "thumbnail": "thumbnail1.jpg",
        "website": "http://somewebsite.com"
    },
    {
        "thumbnail": "thumbnail2.jpg",
        "website": "http://somewebsite.com"
    },
    {
        "thumbnail": "thumbnail3.jpg",
        "website": "http://somewebsite.com"
    }
]}

但是，您希望它看起来像这样（也经过解析）以便在您的 ng-repeat 中使用它：

[
    {
        "thumbnail": "thumbnail1.jpg",
        "website": "http://somewebsite.com"
    },
    {
        "thumbnail": "thumbnail2.jpg",
        "website": "http://somewebsite.com"
    },
    {
        "thumbnail": "thumbnail3.jpg",
        "website": "http://somewebsite.com"
    }
]

解析来自 JSON 的数据

parsing data from JSON

json

angularjs

ng-repeat

ngroute