Error reading JSON file in AngularJS

Question

I am trying to read a json file in AngularJS using $http.get and get some errors in browser console.

Plunker : http://plnkr.co/edit/SDRpu1MmrTPpgpdb6Kyk?p=preview

Here is my code

Javascript:-

var jayApp = angular.module('jayApp', []);

jayApp.controller('jayController', function($scope, $http){

  $scope.entities = {};

    $http.get("test.json").success(
        function(data, status, headers, config) {
            $scope.entities = data;
        }
    );
})

HTML

    <!DOCTYPE html>
<html>

  <head>
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="[email protected]" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

    <script data-require="[email protected]" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script data-require="[email protected]" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script data-require="[email protected]" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app='jayApp' ng-controller='jayController'>
    <h1>Read Json from file </h1>

    Data : {{entities}}
  </body>

</html>

Update:

Error

SyntaxError: Unexpected token '
    at Object.parse (native)
    at fromJson (https://code.angularjs.org/1.4.7/angular.js:1252:14)
    at defaultHttpResponseTransform (https://code.angularjs.org/1.4.7/angular.js:9414:16)
    at https://code.angularjs.org/1.4.7/angular.js:9505:12
    at forEach (https://code.angularjs.org/1.4.7/angular.js:336:20)
    at transformData (https://code.angularjs.org/1.4.7/angular.js:9504:3)
    at transformResponse (https://code.angularjs.org/1.4.7/angular.js:10276:23)
    at processQueue (https://code.angularjs.org/1.4.7/angular.js:14745:28)
    at https://code.angularjs.org/1.4.7/angular.js:14761:27
    at Scope.$eval (https://code.angularjs.org/1.4.7/angular.js:15989:28)(anonymous function) @ angular.js:12477(anonymous function) @ angular.js:9246processQueue @ angular.js:14753(anonymous function) @ angular.js:14761Scope.$eval @ angular.js:15989Scope.$digest @ angular.js:15800Scope.$apply @ angular.js:16097done @ angular.js:10546completeRequest @ angular.js:10744requestLoaded @ angular.js:10685

What are the errors?

jcubic
– jcubic

2015-12-03 14:23:15 +00:00
Commented Dec 3, 2015 at 14:23 — jcubic
– jcubic, Commented Dec 3, 2015 at 14:23
@jcubic Thanks I have updated with errors.

Jay
– Jay

2015-12-03 14:27:32 +00:00
Commented Dec 3, 2015 at 14:27 — Jay
– Jay, Commented Dec 3, 2015 at 14:27
You can use jsoneditoronline.org to verify your JOSN

Vlada
– Vlada

2015-12-03 14:58:10 +00:00
Commented Dec 3, 2015 at 14:58 — Vlada
– Vlada, Commented Dec 3, 2015 at 14:58

ste2425 · Accepted Answer · 2015-12-03 14:24:34Z

7

Your plunker had two issues. first the path to the JSON file was wrong resulting in a 404. Remove the leading / fixed that issue.

The root problem is your JSON is invalid.

It should be

{
  "name":"jay",
  "city":"Tanjore"
}

you had single quotes (') but need to use double (").

answered Dec 3, 2015 at 14:24

ste2425

4,8473 gold badges26 silver badges39 bronze badges

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

3 Comments

Jay Over a year ago

Many thanks can you please check this link plnkr.co/edit/SDRpu1MmrTPpgpdb6Kyk?p=info its a different json ? Is this a problem with this JSON ? This JSON was generated from our app.

ste2425 Over a year ago

@Jay Looking at the console no it is not. If you press f12 in most browsers it will answer most of these question for you. It is throwing exceptions trying to parse it. Also running it through a json validator it fails. Looking at it have you pulled it from a console? It looks like its already been parsed. JSON is a raw string, it describes a JS object. Properies and SOME values need to be enclosed in double quotes (")

ste2425 Over a year ago

@Jay i think yore having issues understanding JSON. May i suggest you have a read on it. First in your http success you do not need to manually parse the response. Angular will do that in this example. Second all your property names need to be enclosed in double quotes, so do any string values. Lastly you were missing a pair of curly braces({}) around the enitre JSON. You had this entityPropertyTypes:[] which is defining an object property however you were missing the braces to define an object litteral so it should be { entityPropertyTypes: [] }

Sajeetharan · Accepted Answer · 2015-12-03 14:27:35Z

2

It's an issue with your JSON and you need to put the Path of the file without '/'

JSON:

{
  "name":"jay",
  "city":"Tanjore"
}

CODE:

$http.get("test.json").success(
    function(data, status, headers, config) {
      console.log(data);
        $scope.entities = data;
    }
);

Here is the updated Plunker

answered Dec 3, 2015 at 14:27

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Jay Over a year ago

Many thanks can you please check this link plnkr.co/edit/SDRpu1MmrTPpgpdb6Kyk its a different json ?

developthewebz · Accepted Answer · 2015-12-03 14:27:30Z

1

Invalid JSON... Should be:

{
  "name":"jay",
  "city":"Tanjore"
}

Also, on your Plunk you are making the call to the wrong place (get rid of the / before test.json).

$http.get("test.json").success( ...

answered Dec 3, 2015 at 14:27

developthewebz

1,9773 gold badges19 silver badges43 bronze badges

Comments

Theo Itzaris · Accepted Answer · 2015-12-03 16:14:29Z

1

as i see into your json file ,you have some syntax errors that is your first main error, so the interpreter cannot read the json data. A. i just added double quotes to your **keys** and B. i enclosed all your json object into curly brakets **{}**
you cant parse a file that is already json object, you parse a json file when you stringify it. So, i remove the 'parse word' and i leave it like this:
```
    $http.get("test.json").success(
        function(data, status, headers, config) {
            $scope.entities =data;  
        }
     );
```

fixed plunker example: http://plnkr.co/edit/G5Y62tQuJit3ZvjHbKQ8?p=preview

i didnt add double quotes to all your keys because they too many , but it is enough to understand your mistake. hope helps good luck.

edited Dec 3, 2015 at 16:14

answered Dec 3, 2015 at 16:01

Theo Itzaris

4,7067 gold badges44 silver badges77 bronze badges

Collectives™ on Stack Overflow

Error reading JSON file in AngularJS

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related