Printing JSON data member into console with angular.js

Question

I want to access JSON object member using angularjs. I can print the whole json object array but can't access the member of the object uniquely.

          $scope.rows = []; // init empty array
          $scope.datainput =[];

          $http({
           method: 'GET',
           url: 'Data/input.json'
        }).then(function (data){
           $scope.datainput=data;
           //console.log($scope.datainput);
           console.log($scope.datainput);


        },function (error){
           console.log("big error");
        });



        var json=JSON.parse($scope.datainput);
        console.log(json[0].status);

I have tried this code also but still geting the same error .

           $scope.temp = "";
           $scope.rows = []; // init empty array
           $scope.datainput =[];


        $http({
            method: 'GET',
            url: 'Data/input.json'
         }).then(function (data){
            $scope.datainput=data;
            //console.log($scope.datainput);
            console.log($scope.datainput);

          var json=JSON.parse($scope.datainput);
          console.log(json[0].status);

         },function (error){
            console.log("big error");
         });

json file input.json:

[
    {"status":"payfail","value":"310"},
    {"status":"payinit","value":"100"},
    {"status":"paysuccess","value":"200"},
    {"status":"payreturn","value":"50"}

]

I get this error :

SyntaxError: Unexpected end of JSON input at JSON.parse ()

The solution will be this....

           $scope.rows = []; // init empty array
           $scope.datainput =[];


        $http({
            method: 'GET',
            url: 'Data/input.json'
         }).then(function (data){
            $scope.datainput=data.data;
            //console.log(data);



            console.log($scope.datainput);

            var json=JSON.parse(JSON.stringify($scope.datainput));
            console.log(json[0].status);


         },function (error){
            console.log("big error");
         });

Ben Farrelly · Accepted Answer · 2019-06-17 08:32:21Z

2

My guess would be that you are trying to parse the JSON string before it has been returned by the promise.

Try putting your parsing code inside the then block so that it executes in the correct order.

Upon further investigation, here is an updated Answer:

In addition to fixing the promise execution order, it turns out there is an issue with the way that you are accessing the data on the response variable.

Check the documentation for $http here: W3Schools.com $http doco

You will see that the callback response value actually contains a member called data for the response payload. To get this working try accessing the data member on the response object.

$scope.datainput=data.data;

It would probably be a good idea to also rename the data response object from data to response for readability.

edited Jun 17, 2019 at 8:32

answered Jun 17, 2019 at 7:25

Ben Farrelly

447 bronze badges

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

12 Comments

Ben Farrelly Over a year ago

Have you tried dumping the data object to the console to see if you are getting anything back from the HTTP request?

Dipto Roy Over a year ago

It worked as a whole object .But It doesn't work If I want to access member uniquely.

Ben Farrelly Over a year ago

It sounds to me like the response may not be valid JSON? If you are getting undefined from the Parse call that would typically mean that it is unable to parse the input string.

Dipto Roy Over a year ago

Than what can I do about it to access all the member uniquely?

Ben Farrelly Over a year ago

Well the first step is to ensure that the response from your service is JSON. I expect if you were to hardcode the JSON into the json object the parse option would work fine.

|

Feras Al Sous · Accepted Answer · 2019-06-17 09:12:10Z

0

You can use this code to solve that:

$scope.rows = []; // init empty array
  $scope.datainput =[];

          $http({
           method: 'GET',
           url: 'Data/input.json'
        }).then(function (data){
           $scope.datainput=data.data;
           console.log($scope.datainput);

        var json= angular.fromJson($scope.datainput); 
         console.log(json[0].status);

        },function (error){
           console.log("big error");
        });

You should'n write Json.Parse out function Get you should write this code inside the then block and use data.data to get the data from json file.

edited Jun 17, 2019 at 9:12

answered Jun 17, 2019 at 7:23

Feras Al Sous

1,0811 gold badge12 silver badges26 bronze badges

7 Comments

Dipto Roy Over a year ago

Still getting the same error.I have tried that before.Now I have tried that again.

Dipto Roy Over a year ago

"angular.min.js:127 TypeError: Cannot read property 'status' of undefined" now I am getting this error

Dipto Roy Over a year ago

Thank for your effort @Feras but its still giving the same error.

Feras Al Sous Over a year ago

can you give me feedback what var json retrieve data

Dipto Roy Over a year ago

Json var could not retrieve any data.It simply giving error. But "console.log($scope.datainput);" this command is printing the whole object.

|

Collectives™ on Stack Overflow

Printing JSON data member into console with angular.js

2 Answers 2

12 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related