Looping through json in Angular

Question

I am reading a JSON from a file in Angular. The content of the file is:

{
"mango":
[
{
  "id": 3,
  "image": "Mango1.jpg",
  "text": "I am mango 3"
},
{
  "id": 2,
  "image": "Mango2.jpg",
  "text": "I am mango 2"
}
]

}

I am reading it in my controller:

    $.getJSON("../json/list.json", function (json) {
    $scope.mangoLists = json;

When i output to console, it shows the mango object etc. But I am unable to output them to the UI by doing this:

    <div class="col-sm-6" ng-repeat="mango in mangoLists">
        {{mango.text}}
    </div>

Please assist.

And how exactly jQuery will trigger a digest cycle?

Alon Eitan
– Alon Eitan

2017-06-29 06:13:21 +00:00
Commented Jun 29, 2017 at 6:13 — Alon Eitan
– Alon Eitan, Commented Jun 29, 2017 at 6:13

Vivz · Accepted Answer · 2017-06-29 07:01:00Z

2

You need to also update the view of the controller data after calling $.getJSON by using $scope.$apply() like so:

$.getJSON("../json/list.json", function (json) {
    $scope.mangoLists = json;
    $scope.$apply();
}

$scope.$apply() will trigger a digest cycle which will update the view.

edited Jun 29, 2017 at 7:01

Vivz

6,6282 gold badges19 silver badges34 bronze badges

answered Jun 29, 2017 at 6:23

AKMorris

4224 silver badges16 bronze badges

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

2 Comments

Rahul Bhatia Over a year ago

This worked. Thank you so much. Why did i have to do this?

AKMorris Over a year ago

I am not 100% sure why you have to update the view, my guess would be it is because .getJSON is not part of Anugular's api so angular references inside the brackets {{ }} are not watching it.

Arun · Accepted Answer · 2017-06-29 06:21:22Z

Can you try as below i think you did something wrong in ng-repeat i hope this will help you

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">

  <div class="col-sm-6" ng-repeat="mango1 in mangoLists.mango">
        {{mango1.text}}
    </div>
</div>

<script>
var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
   $scope.mangoLists = {
"mango":
[
{
  "id": 3,
  "image": "Mango1.jpg",
  "text": "I am mango 3"
},
{
  "id": 2,
  "image": "Mango2.jpg",
  "text": "I am mango 2"
}
]
}
});
</script>

</body>
</html>

Collectives™ on Stack Overflow

Looping through json in Angular

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related