not getting data from JSON file using angularjs 1.6

Question

I am trying to get data from my JSON file using AngularJs 1.6

  myApp.controller("homeCtrl", function($scope, $http) {
      $scope.Data = [];
      var getJsonData = function() {
          $http.get('contactlist.json').then(function(response) {
              $scope.Data = response.data;
              console.log(response.data);
          });
      }
      getJsonData();
  });

But it's not going to response I am putting debug on then line but my page opened without stopping on debug response. So it's not going on then(function(reponse){

My JSON File:

var contactList = [
{
"firstName": "Joe",
"lastName": "Perry",
"contactNumber": "444-888-1223",
"contactEmail": "[email protected]"
},
{
"firstName": "Kate",
"lastName": "Will",
"contactNumber": "244-838-1213",
"contactEmail": "[email protected]"
}
];

what is the log of console.log(response) ?

Gaurav Srivastava
– Gaurav Srivastava

2017-08-06 14:11:37 +00:00
Commented Aug 6, 2017 at 14:11 — Gaurav Srivastava
– Gaurav Srivastava, Commented Aug 6, 2017 at 14:11
it's not getting triggered

Shiv Gaurav
– Shiv Gaurav

2017-08-06 14:12:54 +00:00
Commented Aug 6, 2017 at 14:12 — Shiv Gaurav
– Shiv Gaurav, Commented Aug 6, 2017 at 14:12
any errors in console?

Gaurav Srivastava
– Gaurav Srivastava

2017-08-06 14:14:04 +00:00
Commented Aug 6, 2017 at 14:14 — Gaurav Srivastava
– Gaurav Srivastava, Commented Aug 6, 2017 at 14:14
i am getting error:

Shiv Gaurav
– Shiv Gaurav

2017-08-06 14:14:29 +00:00
Commented Aug 6, 2017 at 14:14 — Shiv Gaurav
– Shiv Gaurav, Commented Aug 6, 2017 at 14:14
what error please explain?

Gaurav Srivastava
– Gaurav Srivastava

2017-08-06 14:15:27 +00:00
Commented Aug 6, 2017 at 14:15 — Gaurav Srivastava
– Gaurav Srivastava, Commented Aug 6, 2017 at 14:15

Shiv Gaurav · Accepted Answer · 2017-08-06 14:58:50Z

1

Got it resolved. Issue was because of semicolon at the end of json file data. Got this error when tried pasting in Plunker editor My Bad.

answered Aug 6, 2017 at 14:58

Shiv Gaurav

4482 gold badges4 silver badges11 bronze badges

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

3 Comments

Koushik Chatterjee Over a year ago

see in my answer I have removed that too, and provided you a workable JSON... :)

Koushik Chatterjee Over a year ago

if you feel that really helps then mark it as accepted in order to help others (including me :P )

Shiv Gaurav Over a year ago

i did since i am a new user it wont be counted

Gaurav Srivastava · Accepted Answer · 2017-08-06 14:20:34Z

0

Change your json file to(your json is not valid):

[{"firstName":"Joe","lastName":"Perry","contactNumber":"444-888-1223","contactEmail":"[email protected]"},{"firstName":"Kate","lastName":"Will","contactNumber":"244-838-1213","contactEmail":"[email protected]"}]

answered Aug 6, 2017 at 14:20

Gaurav Srivastava

3,2323 gold badges20 silver badges37 bronze badges

Comments

Koushik Chatterjee · Accepted Answer · 2017-08-06 14:25:13Z

0

Remove var contactList = from you JSON file and place the JSON contents only

like:

[
   {
        "firstName": "Joe",
        "lastName": "Perry",
        "contactNumber": "444-888-1223",
        "contactEmail": "[email protected]"
    },
    {
        "firstName": "Kate",
        "lastName": "Will",
        "contactNumber": "244-838-1213",
        "contactEmail": "[email protected]"
    }
]

var contactList = <something> meant it's javascript code need to be execute, but you are reading the file and parsing it as a json data and not executing as js file, so make it like a json file so the contents is only json string and not some javascript code.

edited Aug 6, 2017 at 14:25

answered Aug 6, 2017 at 14:19

Koushik Chatterjee

4,1933 gold badges20 silver badges32 bronze badges

8 Comments

Koushik Chatterjee Over a year ago

what was the exact failure message/log in this case?

Shiv Gaurav Over a year ago

Error: [$http:baddata] Data must be a valid JSON object. Received: "[{"id":1}". Parse error: "{}" errors.angularjs.org/1.6.4/$http/… at angular.js:66 at defaultHttpResponseTransform (angular.js:11177) at angular.js:11270 at forEach (angular.js:403) at transformData (angular.js:11269) at transformResponse (angular.js:12090) at processQueue (angular.js:16832) at angular.js:16876 at Scope.$digest (angular.js:17971) at Scope.$apply (angular.js:18269) "Possibly unhandled rejection: {}"

Shiv Gaurav Over a year ago

i tried this for only {"id":1} in a new test.json but still the same error

Koushik Chatterjee Over a year ago

then wrap it in a object

Koushik Chatterjee Over a year ago

and are you sure that you putting the path correctly? what's the network tab says in the devTools/firebug?

|

Collectives™ on Stack Overflow

not getting data from JSON file using angularjs 1.6

3 Answers 3

3 Comments

Comments

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

8 Comments

Your Answer

Sign up or log in

Post as a guest