使用AngularJS访问嵌套的JSON

时间:2016-06-10 13:34:11

标签: angularjs json

我在访问嵌套的JSON值时遇到问题。我得到了另一个价值,它只是嵌套的,我有问题。我试图遵循这个例子,但无法让它工作。 Accesing nested JSON with AngularJS

<div ng-app="myApp" ng-controller="customersCtrl"> 
<ul>
  <li ng-repeat="x in myData">
{{ x.Body + ', ' + x.title + ', ' + x.test_l.filename + ', ' +  x.test_h.filename }}
</li>
</ul>
<!--problem here -->
<ul ng-repeat="x in myData" ng-show="isVisible(x.title)">
  <li ng-repeat="y in x.image">{{y.filename}}</li>
</ul>

我的问题是最后一部分。我正在尝试获取图像的所有文件名。

var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
 $http.get("http://localhost:8012/Adrupal/apistuff/test.json").then(function(response) {
      $scope.myData = response.data;
  });
});

JSON

[
  {
"Body": "This is the first test",
"nid": "1",
"test_h": {
  "fid": "33",
  "uid": "1",
  "filename": "h_pic.png",
  "uri": "public://h_pic.png",
  "filemime": "image/png",
  "filesize": "387",
  "status": "1",
  "timestamp": "1465557583",
  "rdf_mapping": [],
  "alt": "",
  "title": "",
  "width": "88",
  "height": "105"
},
"test_l": {
  "fid": "34",
  "uid": "1",
  "filename": "l_pic.png",
  "uri": "public://l_pic.png",
  "filemime": "image/png",
  "filesize": "315",
  "status": "1",
  "timestamp": "1465557850",
  "rdf_mapping": [],
  "alt": "",
  "title": "",
  "width": "67",
  "height": "93"
},
"image": [
  {
    "fid": "28",
    "uid": "1",
    "filename": "image1.png",
    "uri": "public://image1_0.png",
    "filemime": "image/png",
    "filesize": "39965",
    "status": "1",
    "timestamp": "1465556955",
    "rdf_mapping": [],
    "alt": "",
    "title": "",
    "width": "226",
    "height": "208"
  },
  {
    "fid": "35",
    "uid": "1",
    "filename": "image2.png",
    "uri": "public://image2.png",
    "filemime": "image/png",
    "filesize": "64329",
    "status": "1",
    "timestamp": "1465563195",
    "rdf_mapping": [],
    "alt": "",
    "title": "",
    "width": "321",
    "height": "201"
  }
],
"title": "Test 1",
"Check High": "1",
"Check Low": "1"
 }
]

提前致谢

3 个答案:

答案 0 :(得分:1)

ng-show="isVisible(x.title)"的问题。使用ng-show="x.title"代替ng-show="isVisible(x.title)"

小提琴演示:https://jsfiddle.net/U3pVM/25488/

答案 1 :(得分:0)

解决方案很简单,在您的情况下,您只需要获取数组的第一个元素(对象嵌套的位置)。

$scope.myData = response.data[0];

答案 2 :(得分:0)

我解决了。如果其他人有同样的问题,这是我的解决方案。

<ul ng-repeat="x in myData">
 <li ng-repeat="y in x.image">{{y.filename}}</li>
</ul>