如何使用angularJS在JSON對象中獲得更深層次的內容？

我使用AngularJs得到這個JSON對象內部的一些信息，特別是作者的姓氏和名字：如何使用angularJS在JSON對象中獲得更深層次的內容？

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

的代碼，現在我已經是（這是由bosco2010在此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"; 


});

來源

2013-09-30 jmespinosa

bosco2010提供plunker另一個問題只是爲了澄清。 – jmespinosa

爲了得到第一個和最後一個名字，你就需要引用author[0].firstname和author[0].lastname。

來源

2013-09-30 18:33:04 thomastuts

感謝@thomastuts，所以如果獲得多本書，那麼我將不得不做作者[對]？ – jmespinosa

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

});

簡而言之，同時使用success（）函數和由$ htttp服務返回的promise的then（）函數是不正確的。此外，將範圍作爲參數傳遞給您的服務並嘗試在其中修改它是錯誤的。

如果您需要直接在服務和控制器之間進行通信，則可以使用$ rootScope，$ broadcat或兩者。我修補了你的代碼，現在它可以工作。

普拉克： http://plnkr.co/edit/PlJZZn?p=preview

來源

2013-09-30 18:35:31

如何使用angularJS在JSON對象中獲得更深層次的內容？

回答

相關問題