How to get deeper in a JSON object using angularJS?

Question

I am using AngularJs to get some information inside this JSON object, specifically the author's first and last name:

{
    "bookid": "1",
    "title": "Spring In Action",
    "publisher": "Manning Publications Co.",
    "isbn": "978-1-935182-35-1",
    "owner": "Catalyst IT Services",
    "publishyear": "2011",
    "image": "C:/imagefolder/spring-in-action.jpg",
    "description": "Totally revised for Spring 3.0, this book is a...",
    "author": [
        {
            "authorid": "1",
            "firstname": "Craig",
            "lastname": "Walls",
            "description": "Craig Walls has been professionally developing software for over 17 years (and longer than that for the pure geekiness of it). He is the author of Modular Java (published by Pragmatic Bookshelf) and Spring in Action and XDoclet in Action (both published by (...)"
        }
    ],
    "media": [
    ],
    "tags": [
        {
            "tagid": "1",
            "tagname": "Java"
        },
        {
            "tagid": "5",
            "tagname": "Spring"
        }
    ],
    "copies": [
        {
            "bookcopyid": "2",
            "location": "Beaverton",
            "status": "available"
        }
    ]
}

The code I have right now is (which was provided by bosco2010 in this plunker (http://plnkr.co/edit/GbTfJ9)):

var app = angular.module('app', []);

app.factory('JsonSvc', function ($http) {
  return {read: function(jsonURL, scope) {
        return $http.get(jsonURL).success(function (data, status) {
            scope.data = data.author;      

        });
    }};
});

app.controller('MainCtrl', function($scope, JsonSvc) {


    JsonSvc.read('data.json', $scope).then(function () {
    $scope.nestedObj = $scope.data;  

    });


    $scope.name = "world";


});

bosco2010 provided that plunker to another question just for clarification. — jmespinosa
– jmespinosa, Commented Sep 30, 2013 at 18:55

thomastuts · Accepted Answer · 2013-09-30 18:33:04Z

2

To get the first and last name, you'll need to reference author[0].firstname and author[0].lastname.

answered Sep 30, 2013 at 18:33

thomastuts

3,5593 gold badges22 silver badges28 bronze badges

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

1 Comment

jmespinosa Over a year ago

thanks @thomastuts, so if get more than one book then i'll have to do author[n] right?

Oleg Belousov · Accepted Answer · 2013-09-30 18:42:19Z

var app = angular.module('app', []);

app.factory('JsonSvc', function ($http) {
  return {read: function(jsonURL) {
        return $http.get(jsonURL);
    }};
});

app.controller('MainCtrl', function($scope, JsonSvc) {

  // The return object from $http.get is a promise.  I used .then() 
  // to declare $scope.nestedObj after the http call has finished.
    JsonSvc.read('data.json').then(function (data) {
      console.log(data.data);
    $scope.nestedObj = data.data.level1;  
    });

  // ensure app is working
    $scope.name = "world";

  // Using nested obj within declared scope var doesn't work
  // Uncomment below to break whole app

  // Using nested obj in a function works but throws TypeError
  // Declaring $scope.data.level1.level2 = [] first helps here
  $scope.getLen = function () {
      return $scope.nestedObj ? $scope.nestedObj.level2.length : ''; // return an empty string if the callback didn't happen yet
  };

});

In short, it is incorrect to use both the success() function and also the then() function of the promise returned by the $htttp service. Moreover, it is wrong to pass your scope as a parameter to your service and try to modify it there.

if you need to communicate between the service and a controller directly, you can use either $rootScope, $broadcat, or both. I patched up your code, and now it works.

Plunk: http://plnkr.co/edit/PlJZZn?p=preview

Collectives™ on Stack Overflow

How to get deeper in a JSON object using angularJS?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related