CODEWITHSUNDEEP
javascriptjsonparsingsyntax-errorcharacter
Daan
Daan

Reputation: 13

JSON.parse throws unexpected character error at start of line 1 of the JSON data

i am still relatively new to the whole JavaScript environment and i need help with parsing a JSON file into a JSON object to read the contents of the file. I have been reading a lot of other questions and documentation but so far i have not seen anything relevant to my question.

First the situation: I have a file called test.json which is supposed to be delivered from a server. But for testing purposes it is stored locally as clusters.json, in the same folder as my html document. Code for HTML file:

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>JSON THINGIE</title>
</head>
<body>
    <h1>A Header</h1>
    <p id="textone">sample text</p>
    <script>
        var jsonFile = "/clusters.json";
        var jsonObj = JSON.parse(jsonFile);
    </script>
</body>
</html>

The codes executes untill JSON.parse(jsonTest);, then it throws this error (from mozilla debug tool):

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

JSON File (clusters.json)

{
    "occupation":{
      "employment":[
         {
            "id":1,
            "cluster_name":"Tekenaar",
            "weight":0.5,
            "similarity":0.1,
         },
         {
            "id":4,
            "cluster_name":"Tekenaar Constructeur",
            "weight":0.6,
         }
      ],
      "education":[
         {
            "id":2,
            "cluster_name":"HBO",
            "weight":1,
         },
         {
            "id":3,
            "cluster_name":"HBO",
            "weight":1,
         }
      ]
   }
}

Appearantly the { opening bracket is wrong but the JSON docs state that files can be opened with { or [.

I have checked my JSON with multiple validator tools and even used a copypaste from the JSON Example page but everything gives the same error.

Also in accordance to the answer to this question, i tried using JSON.stringify(jsonTest) first, but to no avail.

What could i possibly be doing wrong? Any help is appreciated since i am already spending too much time on this error. Thanks.

Edit 1: It was indeed my own mistake of thinking that using a string would make the parser load the file automatically.

Serverless Fix: I succeeded in loading the text from the file by using the answer to this question. Which i arrived at when i was searching for how to use file://.

Implementation of fix for future reference:

// URL to the file
var jsonFile = 'file:///C://Users//Daan//Projects//Temp Name//clusters.json'

function readTextFile(file) {
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                var allText = rawFile.responseText;
                // Show alert with the read text.
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

readTextFile(jsonFile);

Upvotes: 0

Views: 4386

Answers (3)

DividedSky
DividedSky

Reputation: 21

From your code it looks like you are trying to give JSON.parse() a file name as a parameter. JSON.parse() accepts a string. You'll have to get your hands on the file contents and then pass this to JSON.parse(). This answer may be helpful.

JSON.parse() documentation

Upvotes: 0

TheBilTheory
TheBilTheory

Reputation: 408

Try without the JSON.parse(xxx)

You can remove var jsonObj = JSON.parse(jsonFile);

JSON.parse is trying to convert your file in a JSON format which is JSON already.

Just use jsonFile in your code.

Upvotes: 0

Thijs
Thijs

Reputation: 2351

The line var jsonFile = "/clusters.json"; doesn't load the file, it just creates a string. The next line is trying to parse the string as a JSON object, which it is not. You will have to load the file somehow before trying to parse its content.

You will probably need a webserver to run your website on, if you don't have that already, and load the file using AJAX.

Upvotes: 1

Related Questions