Reading JSON data into Javascript

Question

I have the following piece of code in a function to read in a JSON file:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        myObj = this.responseText;
        console.log(myObj);
        JSON.parse(myObj); // error is here
    }
};
xmlhttp.open("GET", "music-data.json", true);
xmlhttp.send();

The JSON data is coming locally from the same folder as my html/css/js files, and is structured as:

window.MUSIC_DATA = {
  "list1": [
    {
        data here...
   },
 ],
  "list2": [
    { data here...
 ...
}

I am unable to parse my object and extract what I need from list1 and list2 and get an error with the existing code:

Uncaught SyntaxError: Unexpected token w in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHttpRequest.xmlhttp.onreadystatechange

remove window.MUSIC_DATA = part in your json file

Sergei Klykov
– Sergei Klykov

2017-01-18 08:35:49 +00:00
Commented Jan 18, 2017 at 8:35 — Sergei Klykov
– Sergei Klykov, Commented Jan 18, 2017 at 8:35

RemcoGerlich · Accepted Answer · 2017-01-18 08:35:59Z

2

The problem is with

window.MUSIC_DATA =

That's not JSON, it's JavaScript. Remove that from the file so that only the value is left, and it may work (or there may be other problems with the file).

answered Jan 18, 2017 at 8:35

RemcoGerlich

31.4k6 gold badges66 silver badges83 bronze badges

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

Comments

Darin Dimitrov · Accepted Answer · 2017-01-18 08:42:02Z

1

As others have stated you need to fix your server side file to be a valid JSON. If you have no control over the contents of this file and want to avoid string manipulation routines here's an alternative approach that you could use:

var s = document.createElement('script');
s.src = 'music-data.json';
s.async = true;
s.onreadystatechange = s.onload = function() {
    if (!s.readyState || /loaded|complete/.test(s.readyState)) {
        var myObj = window['MUSIC_DATA'];
        console.log(myObj);

        alert(myObj.list1);
        alert(myObj.list2);
        ...
    }
};
document.querySelector('head').appendChild(s);

answered Jan 18, 2017 at 8:42

Darin Dimitrov

1.0m275 gold badges3.3k silver badges3k bronze badges

Comments

John F. · Accepted Answer · 2017-01-18 08:37:39Z

0

Change this:

window.MUSIC_DATA = {
  "list1": [
    {
        data here...
   },
 ],
  "list2": [
    { data here...
 ...
}

to this:

{
  "list1": [
    {
        data here...
   },
 ],
  "list2": [
    { data here...
 ...
}

answered Jan 18, 2017 at 8:37

John F.

1641 silver badge10 bronze badges

Collectives™ on Stack Overflow

Reading JSON data into Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related