Issue encountered while parsing JSON file using AngularJS

Question

Issue encountered while parsing JSON file using AngularJS

Having some trouble reading a json file in AngularJS using $http.get and encountering errors in the browser console.

Check out my Plunker example: http://plnkr.co/edit/SDRpu1MmrTPpgpdb6Kyk?p=preview

Below is the code snippet:

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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1838e8e959295938091a1d2cfd2cfd4">[email protected]</a>" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c8c8d3d4d3d5c6d7e79489948992">[email protected]</a>" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cosmo/bootstrap.min.css" />
    <link data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b1d3dedec5c2c5c3d0c1f1829f829f84">[email protected]</a>" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />

    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e48e959181969da4d5cad5d5cad7">[email protected]</a>" data-semver="1.11.3" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b3d1dcdcc7c0c7c1d2c3f3809d809d86">[email protected]</a>" data-semver="3.3.5" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb9a959c8e979a89d59188bbcad5cfd5cc">[email protected]</a>" 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

javascript angularjs json

Answer 1

Answer №1

There were a couple of issues with your plunker. Firstly, there was an error due to the incorrect path to the JSON file, resulting in a 404 error. By removing the leading /, this issue was resolved.

The main problem lies in the invalid format of your JSON.

It should appear as:

{
  "name": "Alice",
  "city": "London"
}

You originally used single quotes (') instead of the required double quotes (").

Answer 2

There were a couple of issues with your plunker. Firstly, there was an error due to the incorrect path to the JSON file, resulting in a 404 error. By removing the leading /, this issue was resolved.

The main problem lies in the invalid format of your JSON.

It should appear as:

{
  "name": "Alice",
  "city": "London"
}

You originally used single quotes (') instead of the required double quotes (").

Answer 3

Answer №2

There seems to be an issue with the JSON file path, make sure you remove any unnecessary '/' in the file path.

JSON Data:

{
  "name":"Alice",
  "city":"New York"
}

JavaScript Code:

$http.get("example.json").then(
    function(response) {
      console.log(response.data);
        $scope.items = response.data;
    }
);

Check out the revised Plunker for more details.

Answer 4

There seems to be an issue with the JSON file path, make sure you remove any unnecessary '/' in the file path.

JSON Data:

{
  "name":"Alice",
  "city":"New York"
}

JavaScript Code:

$http.get("example.json").then(
    function(response) {
      console.log(response.data);
        $scope.items = response.data;
    }
);

Check out the revised Plunker for more details.

Answer 5

Answer №3

Error in JSON format... The correct format should be:

{
  "firstName":"Alice",
  "lastName":"Smith"
}

In addition, on your Plunk, the URL for the call is incorrect (remove the / before data.json).

$http.get("data.json").then( ...

Answer 6

Error in JSON format... The correct format should be:

{
  "firstName":"Alice",
  "lastName":"Smith"
}

In addition, on your Plunk, the URL for the call is incorrect (remove the / before data.json).

$http.get("data.json").then( ...

Answer 7

Answer №4

Upon reviewing your JSON file, it appears that there are syntax errors present which is the primary issue causing the interpreter to not be able to read the JSON data. A. I have rectified this by adding double quotes to your **keys** and B. enclosing all your JSON objects within curly brackets {}
It is important to note that you cannot parse a file that is already a JSON object; parsing is done when the data is stringified. Therefore, I have removed the 'parse' word and adjusted the code as follows:
```
$http.get("test.json").success(
    function(data, status, headers, config) {
        $scope.entities =data;  
    }
);
```

Check out the fixed plunker example here: http://plnkr.co/edit/G5Y62tQuJit3ZvjHbKQ8?p=preview

I did not add double quotes to all your keys as there were too many, but this adjustment should help you understand where the mistake was made. https://i.sstatic.net/p8Fd0.png I hope this helps and good luck with your project.

Answer 8

Upon reviewing your JSON file, it appears that there are syntax errors present which is the primary issue causing the interpreter to not be able to read the JSON data. A. I have rectified this by adding double quotes to your **keys** and B. enclosing all your JSON objects within curly brackets {}
It is important to note that you cannot parse a file that is already a JSON object; parsing is done when the data is stringified. Therefore, I have removed the 'parse' word and adjusted the code as follows:
```
$http.get("test.json").success(
    function(data, status, headers, config) {
        $scope.entities =data;  
    }
);
```

Check out the fixed plunker example here: http://plnkr.co/edit/G5Y62tQuJit3ZvjHbKQ8?p=preview

I did not add double quotes to all your keys as there were too many, but this adjustment should help you understand where the mistake was made. https://i.sstatic.net/p8Fd0.png I hope this helps and good luck with your project.

Issue encountered while parsing JSON file using AngularJS

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Ways to initiate the download of an audio link using JS without the need for the browser to redirect to a different page

Troubleshooting the issue: React Native Redux not navigating correctly using API IDs

Swift - Transforming an NSMutableArray into an array of MKAnotationViews

What is the process for retrieving my dates from local storage and displaying them without the time?

Creating a series of promises in a structured chain

Unable to convert the String prop that was passed from the parent component to a JSON object using JSON.parse() in a React child component

The MVC6 controller is receiving null values for the posted data

Generating an array within the custom hook results in the value being re-rendered with each change in state

Storing prop object in LocalStorage when clicking on a Vue3 component

Having trouble with Ajax.updater?

Trouble encountered while trying to utilize a Promise to define a global variable

Bootstrap allows for the use of video backgrounds, offering the option for borders to be included

Manipulate audio files by utilizing the web audio API and wavesurfer.js to cut and paste audio

Struggling to synchronize animation timing between elements using jquery

Searching for curly braces in Python using regular expressions

Looping through JSON keys using ng-repeat in AngularJS

What is the best way to convert string dot notation into a nested object structure?

Issues with Bootstrap's hamburger menu not functioning properly when clicked

Implementing CSS styles with the className attribute in a Material UI component within a ReactJS application sourced from a dynamic JSON object

Internet Explorer causing trouble with reliable Ajax dropdown selection