Uncaught SyntaxError: Unexpected token while reading JSON file

Question

My JSON file is:

{
    "myjson": [{
        "id": "1",
        "name": "x"
    }, {
        "id": "2",
        "name": "y"
    }]
}

And my HTML file to read it is like this:

<div id="id01"></div>

<script>
function myjson(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<a href="' + arr[i].id + '">' + arr[i].name + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}
</script>

<script src="js/myjson.json"></script>

But I get this error: Uncaught SyntaxError: Unexpected token in line 2

I can't change the JSON file, How can I solve the problem by changing HTML/JS code?

The JSON is invalid. The last property of an object does not have a semicolon after its value. See http://jsonlint.com/. — Danmoreng, Oct 28 '15 at 11:27
In addition, you can find such errors by using http://jsonlint.com/ — Samuli Hakoniemi, Oct 28 '15 at 11:28
Wait, wait, the JSON is valid according to JSON lint but your code does not show us how you parse it at all. There is just a function inside your code, it never gets called and it does not even decode JSON anywhere. — somethinghere, Oct 28 '15 at 11:32
@somethinghere now the JSON is valid he edited his post, before it was not. — Danmoreng, Oct 28 '15 at 11:32
How are you reading `external` json file ? When are you calling `myjson` function ? — Rayon, Oct 28 '15 at 11:48
You should load json file using ajax request and store the result into a variable and then call myjson method over that variable. — Rahul Singh, Oct 28 '15 at 11:58

score 0 · Answer 1 · edited May 23 '17 at 12:29

0

What you want to do is first parse the JSON file, then use your function for the array. You can get the JSON from a file by using JQuery like this:

http://api.jquery.com/jquery.getjson/

$.getJSON("js/myjson.json", function(json){
    // json is an object which contains the array called "myjson"
    // now you can pass that array into your function like this:
    myjson(json.myjson);
})

If you don't want to use JQuery look how it's done without here:

How can I open a JSON file in JavaScript without jQuery?

Edit: Okay lets do it as a whole.

HTML:

<div id="id01"></div>

Javascript:

function myjson(arr) {
    var out = "";
    var i;
    for(i = 0; i<arr.length; i++) {
        out += '<a href="' + arr[i].id + '">' + arr[i].name + '</a><br>';
    }
    document.getElementById("id01").innerHTML = out;
}

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

loadJSON('js/myjson.json', function(data){ myjson(data.myjson);}, function(xhr) {console.error(xhr); });

You can either put your Javascript inside your HTML with a script tag like

<script language="javascript" type="text/javascript">//Javascript goes here</script>

or put it into a seperate file and just link it in your HTML like this

<script language="javascript" type="text/javascript" src="js/myscript.js"></script>

edited May 23 '17 at 12:29

Community

1
1

answered Oct 28 '15 at 11:39

Danmoreng

2,367
1
19
32

**parse the JSON file** ? – Rayon Oct 28 '15 at 11:41
@RayonDabre JQuery does that for you already. If you would get it as a string you would have to use JSON.parse(string) first to convert it into an object. – Danmoreng Oct 28 '15 at 11:42
[Unless a tag for a framework/library is also included, a pure JavaScript answer is expected.](http://stackoverflow.com/tags/javascript/info) – Quentin Oct 28 '15 at 11:43
@Quentin Edited in a solution without JQuery. – Danmoreng Oct 28 '15 at 11:48
I get a bit confused, how should my HTML/JS code be right now ? to read that file – Amir Khademi Oct 28 '15 at 11:53
I assume you are not using JQuery Anderson? And if I understand you correctly you have the JSON located in one file and want to load it from there into your HTML page? – Danmoreng Oct 28 '15 at 11:55
@user2415266 You have already put in _way more_ effort than necessary. There are dozens of questions about this on SO with great answers. +1 for you and boo to the downvoters. – somethinghere Oct 28 '15 at 12:06
@user2415266 yes that is, I should read that file on the server and load it's content in my HTML page. I did what you say, but it has an error : data is not defined – Amir Khademi Oct 28 '15 at 14:06
That is because I messed up, sorry about that I changed the code.. loadJSON needs a function as second argument, myjson(data.myjson) was wrong there. Now it should work. – Danmoreng Oct 28 '15 at 15:33

Uncaught SyntaxError: Unexpected token while reading JSON file

1 Answers1