Best practice to get a json response object in angularjs

Question

I have an API which return a json array object, right now, I get the json in my Controller like this and it works just fine :

angular.module('lyricsApp', [])
.controller('LyricsController', ['$scope', 'ApiCall', function ($scope, ApiCall) {
    $scope.lyrics = {
        id: "",
        songName: "",
        singerName: "",
        writtenBy: "",
        lyricText: "",
        isEnable: "",
        created_at: "",
        updated_at: ""
    };

    $scope.searchLyric = function () {
        var result = ApiCall.GetApiCall().success(function (lyrics) {
            $scope.lyrics.id = lyrics.data.id
            $scope.lyrics.singerName = lyrics.data.singerName;
            $scope.lyrics.songName = lyrics.data.songName;
            $scope.lyrics.writtenBy = lyrics.data.writtenBy;
            $scope.lyrics.lyricText = lyrics.data.lyricText;
            $scope.lyrics.isEnable = lyrics.data.isEnable;
            $scope.lyrics.created_at = lyrics.data.created_at;
            $scope.lyrics.updated_at = lyrics.data.updated_at;   
        });
    }
}])

But I think this is not a good practice, I already try this :

var result = ApiCall.GetApiCall().success(function (lyrics) {
     $scope.lyrics=lyrics.data;
});

in this case I get undefined value :

console.log($scope.lyrics.id); // show Undefined

So, if you guys can suggest a better way I will be appreciate it.

console.log($scope.lyrics.id); will have a value after $scope.lyrics=data.data; line. — Pankaj Parkar
– Pankaj Parkar, Commented Oct 12, 2016 at 6:44
Your example code is missing a semicolon after data.data.id .. $scope.lyrics will only have a value after the call has been made and processed, so if you log the value inside your success handler (and after setting $scope.lyrics), it should work with $scope.lyrics=data.data. — semvdwal
– semvdwal, Commented Oct 12, 2016 at 6:46
Yes, I used console.log($scope.lyrics.id); just after that but it return undefined! when I assign the data like this : $scope.lyrics.id = data.data.id it have the correct value. — Emad Dehnavi
– Emad Dehnavi, Commented Oct 12, 2016 at 6:47
@semvdwal missing semicolon wouldn't be mess, JS interpreter would add it implicitly for us :) — Pankaj Parkar
– Pankaj Parkar, Commented Oct 12, 2016 at 6:48

Vivek V Dwivedi · Accepted Answer · 2016-10-12 06:49:53Z

3

You are doing the right thing, except for console.log. If your log statement is executed before the assignment is done, you will get the undefined value.

Also I don't see why you would do a var result =

You can simply do

ApiCall.GetApiCall('v1', 'lyrics', '1').success(function (data) {
    $scope.lyrics = data.data;
    console.log($scope.lyrics.id);
}).error(fucntion(data){
    console.log(data);
});

answered Oct 12, 2016 at 6:49

Vivek V Dwivedi

2,6352 gold badges31 silver badges41 bronze badges

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

2 Comments

Emad Dehnavi Over a year ago

thanks,it worked! I don't know why last time I used the same code and I get undefined.

Sajed Over a year ago

btw it becomes as a good example of 2 methods that can get data into $scope

Collectives™ on Stack Overflow

Best practice to get a json response object in angularjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related