Trouble in reading json data in angularJs

Question

I am trying to read a json file which contains the list of songs and a url to the image

{"songs" : [
{
    "SongName" : "Broken Dreams",
    "image" : "img/browser.svg"
},
{
    "SongName" : "My heart goes on",
    "image" : "img/browser.svg"
},
{
    "SongName" : "Summer of 69",
    "image" : "img/browser.svg"
},
{
    "SongName" : "Broken Hearted Girl",
    "image" : "img/browser.svg"
},
{
    "SongName" : "American idiot",
        "image" : "img/browser.svg"
    }
]}

but the basic issue is when I use the $http.get(), it reads the json but I am not able to assign it to the angularJS object, here is my angularJS code

var app = angular.module('TheSlideShow', []);
        app.controller('mainController', ['$scope', '$http', function($scope, $http){

            $scope.test = "this is a test string";
            $scope.songList = {};

                $http.get("Data/SongList.json", ['$scope']).success(function(List){ $scope.songList  = List.songs;  console.log("The Length : " + $scope.songList.length);});

            for(var i = 0; i< $scope.length; i++)
                {
                    console.log("loop number" + i);
                }

        }]);

The Length field gives the result as 5 but my for loop does not run even for a single time..

The quesion you have linked is based on jquery and i am looking for angularJS way! — Pragam Shrivastava, Apr 23 '15 at 12:26

Pankaj Parkar · Accepted Answer · 2015-04-23T11:16:31.530

0

Number of mistakes

You should not pass $scope to $http.get
You can not get $scope.songList value outside ajax directictly, the value is getting populated through ajax call, so you need to run for loop inside ajax success

Code

$http.get("Data/SongList.json").success(function(List){ 
  $scope.songList  = List.songs;  
  console.log("The Length : " + $scope.songList.length);
  for(var i = 0; i< $scope.songList.length; i++)
  {
     console.log("loop number" + i);
  }
});

edited Apr 23 '15 at 11:16

answered Apr 23 '15 at 11:10

Pankaj Parkar

134,766
23
234
299

1

Hey thanks for reminding me about the $scope variable, I was using the hit and trial method and forgot to remove it. I want to use the data from the json into another function is there any other way to do it? I mean how I could pass my song list to the different function? – Pragam Shrivastava Apr 23 '15 at 12:00
does that javascript function inside inside controller? – Pankaj Parkar Apr 23 '15 at 12:03
Yes! that function would be inside the same controller! – Pragam Shrivastava Apr 23 '15 at 12:28
you could easily pass it as param like `$scope.someFunction($scope.songList)` & the function would be `$scope.someFunction = function(songs){ //you could songs here }` – Pankaj Parkar Apr 23 '15 at 12:35

Trouble in reading json data in angularJs

1 Answers1