Advice on how to access child objects from JSON in Angular JS

Question

I have created the following controller in Angular, and I'm trying to access some child objects in the returned JSON.

Controller:

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

app.controller("FAQCtrl", function($scope, $http) {
    $scope.dataLoaded = false;
              $http.get('config/data.json', {
      })
    .success(function(data, status, headers, config) {
      $scope.config = data;
      $scope.dataLoaded = true;  
    }).
    error(function(data, status, headers, config) {
      window.alert("Sorry! There has been a problem!\n\nPANIC!")
    });
});

The JSON that's returned is in this format :

{
"entryList":
{
    "totalEntries": 237,
    "incEntries": 10,
    "offset": 0,
    "loggingURL": "/action/logStatistics?action1=%27client%d%27",
    "entry":
[
        {
            "catID": "delivery",
            "entryID": "delivery-charges",
            "subcatID": "delivery-options",
            "question": "What are your delivery charges?"
},
        {
            "catID": "returns-and-refunds",
            "entryID": "online-returns-policy",
            "subcatID": "returns-policy",
            "question": "What is your online returns policy?"
},
        {
            "catID": "delivery",
            "entryID": "track-delivery",
            "subcatID": "order-status",
            "question": "How can I track my delivery/order?"
},
        {
            "catID": "delivery",
            "entryID": "click-and-collect",
            "subcatID": "delivery-options",
            "question": "Do you offer Click and Collect or Collect +?"
},
        {
            "catID": "products-and-services",
            "entryID": "makeover",
            "subcatID": "services",
            "question": "Can I come in for a free makeover and skin consultation?"
},
        {
            "catID": "delivery",
            "entryID": "how-long-for-delivery",
            "subcatID": "delivery-queries",
            "question": "How long will it take for my products to be delivered?"
        }
    ]
}

}

I'd like to be able to return the details of each of the "entry" sections of the feed, but I'm struggling to make the following work:

<div ng-repeat="item in entryList">
<a href="" class="btn btn-info btn-lg btn-block">{{item.entryID}}</a>
<br />
</div>

Could any one give me an idea on how I can easliy access the child sections?

Thanks

Sid · Accepted Answer · 2015-08-11 13:00:37Z

3

There seem to be several problems here.

You are referring to entryList in ng-repeat but you don't have a variable called entryList in your scope. Once your data is returned you will need to assign $scope.entryList = data.entryList.entry;in the success portion.
If this is data that is required by the directive on your page on load then you should pass it into your controller rather than populating it after the controller is loaded. This can be done by using resolve. Here's more info on that https://thinkster.io/egghead/resolve

answered Aug 11, 2015 at 13:00

Sid

7,6412 gold badges31 silver badges42 bronze badges

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

Comments

Rosmarine Popcorn · Accepted Answer · 2015-08-11 12:58:56Z

1

On your ajax call you're storing all data at $scope.config so either store them elsewhere or use config on ng-repeat

<div ng-repeat="item in config.entryList.entry">
<a href="" class="btn btn-info btn-lg btn-block">{{item.entryID}}</a>
<br />
</div>

Otherwise if you want to store it on another variable than :

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

app.controller("FAQCtrl", function($scope, $http) {
    $scope.dataLoaded = false;
              $http.get('config/data.json', {
      })
    .success(function(data, status, headers, config) {
      $scope.config = data;
      $scope.entrylist = data.entryList.entry;
      $scope.dataLoaded = true;  
    }).
    error(function(data, status, headers, config) {
      window.alert("Sorry! There has been a problem!\n\nPANIC!")
    });
});

edited Aug 11, 2015 at 12:58

answered Aug 11, 2015 at 12:57

Rosmarine Popcorn

11k11 gold badges62 silver badges90 bronze badges

1 Comment

Rosmarine Popcorn Over a year ago

@charlietfl I'm not getting this quite well ?

Collectives™ on Stack Overflow

Advice on how to access child objects from JSON in Angular JS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related