Use AngularJS to access nested JSON

Question

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

Have you looked at Unerscore.js? They have a .pick method that makes this very easy. underscorejs.org/#pick You could also try the .findKey method they provide underscorejs.org/#findKey — Evan Bechtol
– Evan Bechtol, Commented Jun 10, 2016 at 13:37

Rohìt Jíndal · Accepted Answer · 2016-06-10 15:41:35Z

1

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/

answered Jun 10, 2016 at 15:41

Rohìt Jíndal

27.4k16 gold badges80 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andras Szell · Accepted Answer · 2016-06-10 13:38:50Z

0

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];

answered Jun 10, 2016 at 13:38

Andras Szell

5272 silver badges13 bronze badges

Comments

Kong · Accepted Answer · 2016-06-10 14:09:24Z

0

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>

answered Jun 10, 2016 at 14:09

Kong

3152 silver badges12 bronze badges

Collectives™ on Stack Overflow

Use AngularJS to access nested JSON

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related