AngularJs Json issue

Question

I am currently working with angularJS and I have run into an issue.

Following Code is not working when I am switching version of AngularJS

    <script>
    // Code goes here
angular.module('list', []);

function ListCtrl($scope, $http) {
  $http({
    method: 'GET',
    url: 'json_price_1.json'
  }).success(function(data) {
    $scope.artists = data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });
    });
  });
}
    </script>
    </head>
    <body ng-app="list">
<h3>List of Artists</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="artist in artists">
    <li>{{artist.name}}</li>
  </ul>
    </div>
<h3>List of Albums</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="album in albums">
    <li>{{album.title}}</li>
  </ul>
    </div>
</body>

Above code is working fine when I am using the old version of AngularJS

Old Version AngularJS link :

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>

But it is not working when I am calling New AngularJS

New AngularJS Link :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

help me to fix this issue.

Json file

{
  "version": "1",
  "artists": [
    {
      "name": "artist1name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum1",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "1"
        },
        {
          "type": "cd",
          "title": "titlealbum2",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "2"
        },
        {
          "type": "cd",
          "title": "titlealbum3",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "3"
        }
      ]
    },
    {
      "name": "artist2name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum4",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "4"
        },
        {
          "type": "cd",
          "title": "titlealbum5",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "5"
        },
        {
          "type": "cd",
          "title": "titlealbum6",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "6"
        }
      ]
    }
  ]
}

I am not getting any error in Developer tools Google chrome (inspect), but in console.log(data) all result visible. — user2866865
– user2866865, Commented Apr 9, 2018 at 4:58
here the code. <script> // Code goes here var list = angular.module("list",[]); list.controller('ListCtrl', function($scope, $http) { $http({ method: 'GET', url: 'json_price_1.json' }).then(function(data) { $scope.artists = data.artists; // response data $scope.albums = []; angular.forEach(data.artists, function(artist, index) { angular.forEach(artist.albums, function(album, index){ $scope.albums.push(album); }); }); console.log(data); }); }); </script> — user2866865
– user2866865, Commented Apr 9, 2018 at 5:00
check code bellow plnkr.co/edit/ikDJxC2WegN3R2chESG3?p=preview — user2866865
– user2866865, Commented Apr 9, 2018 at 5:18

Marcus Höglund · Accepted Answer · 2018-04-06 06:23:54Z

You need to add the controller to the angular module

angular.module('list', [])
.controller('ListCtrl', function ($scope, $http) {
  $http({
    method: 'GET',
    url: 'json_price_1.json'
  }).success(function(data) {
    $scope.artists = data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });
    });
  });
});

Here's an working example against angularjs 1.6.9 (simplified by adding the json on the scope)

angular.module('list', [])
.controller('ListCtrl', function ($scope, $http) {
    
    $scope.json = {
  "version": "1",
  "artists": [
    {
      "name": "artist1name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum1",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "1"
        },
        {
          "type": "cd",
          "title": "titlealbum2",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "2"
        },
        {
          "type": "cd",
          "title": "titlealbum3",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "3"
        }
      ]
    },
    {
      "name": "artist2name",
      "jpeg": "../img/artist/artist1.jpg",
      "albums": [
        {
          "type": "cd",
          "title": "titlealbum4",
          "subtitle": "subtitlealbum1",
          "jpeg": "../img/album1.jpg",
          "price": "12.00",
          "anystring1": "anystring1album1",
          "anystring2": "anystring2album1",
          "id": "4"
        },
        {
          "type": "cd",
          "title": "titlealbum5",
          "subtitle": "subtitlealbum2",
          "jpeg": "../img/album2.jpg",
          "price": "12.00",
          "anystring1": "anystring1album2",
          "anystring2": "anystring2album2",
          "id": "5"
        },
        {
          "type": "cd",
          "title": "titlealbum6",
          "subtitle": "subtitlealbum3",
          "jpeg": "../img/album3.jpg",
          "price": "13.00",
          "anystring1": "anystring1album3",
          "anystring2": "anystring2album3",
          "id": "6"
        }
      ]
    }
  ]
};
    
    var data = $scope.json;
    $scope.artists = data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });
    });
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <div ng-app="list">
<h3>List of Artists</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="artist in artists">
    <li>{{artist.name}}</li>
  </ul>
    </div>
<h3>List of Albums</h3>
<div ng-controller="ListCtrl">
      <ul ng-repeat="album in albums">
    <li>{{album.title}}</li>
  </ul>
    </div>
</div>

Thank you for your reply, i need to call from an external json file, if i am calling from external json file its not working fine

Sravan · Accepted Answer · 2018-04-09 05:26:01Z

In your json response, you are getting data in data.data so you should use

$scope.artists = data.data.artists

Here is the code,

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

list.controller('ListCtrl', function($scope, $http) {

  $http({
    method: 'GET',
    url: 'todos.json'
  }).then(function(data) {

    $scope.artists = data.data.artists; // response data
    $scope.albums = [];
    angular.forEach(data.data.artists, function(artist, index) {
      angular.forEach(artist.albums, function(album, index){
        $scope.albums.push(album);
      });

    });


  });
});

Here is a working plunker

Glad to help you, you can accept and vote my answer, if you find it useful. :)

Collectives™ on Stack Overflow

AngularJs Json issue

2 Answers 2

1 Comment

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Related