CODEWITHSUNDEEP
angularjsjson
Kong
Kong

Reputation: 315

Use AngularJS to access nested JSON

I have an issue with accessing nested JSON value's. I get the other value's, it's just the nested one's, that I have a problem with. I tried to follow this example but could not get it to work. 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>

My problem is the last part. I am trying to get all the filename's of the image.

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"
 }
]

Thanks in advance

Upvotes: 1

Views: 108

Answers (3)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

Problem with ng-show="isVisible(x.title)". use ng-show="x.title" instead of ng-show="isVisible(x.title)".

Fiddle demo : https://jsfiddle.net/U3pVM/25488/

Upvotes: 1

Kong
Kong

Reputation: 315

I solved it. If anyone else have the same issue here is my solution.

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

Upvotes: 0

Andras Szell
Andras Szell

Reputation: 527

The solution is easy, in your case you just have to get the first element of the array (where the object is nested).

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

Upvotes: 0

Related Questions