JSON array error

Question

I have the following JSON file (rectangles.json):

{  
   "rectangles":[  
   {  
     "x":0,
     "y":0,
     "width":20,
     "height":10,
     "color":"red"
  },
  {  
     "x":25,
     "y":0,
     "width":20,
     "height":10,
     "color":"red"
  }
]
}

I get the following error: 'Unexpected Token :' on line 2. I can't figure out the issue. Any suggestions? Below is the javascript I have in a local file:

function load(){
 var myData = JSON.parse(rectangles);
 var can = document.getElementById('rectangleCanvas');
 var context = can.getContext('2d');

 for (i=0; i<myData.length; i++){
  context.fillStyle = myData[i].color;
  context.fillRect(myData[i].x, myData[i].y, myData[i].width, myData[i].height);
} 
}

And her is my HTML from another local file:

<!DOCTYPE html>
<html>
<head>
<title>Fetch JSON array Data</title>

<script type="text/javascript" src="myScript.js"></script>
<script type="text/javascript" src="rectangles.json"></script>
</head>
<body>
<canvas id="rectangleCanvas" width="22528" height="20922"></canvas> 
<script>load();</script>
</body>
</html>

I don't see anything wrong either. JSON lint says it's valid as well. I have a feeling it's going wrong somewhere else. Could you post your code that leads up to this error? — D. Visser
– D. Visser, Commented Jun 1, 2015 at 22:04
@D.Visser I added myjavascript and html to my original post. — Mike
– Mike, Commented Jun 2, 2015 at 11:09
if you use this json in console then it will give you error use var xyz =yourJson same in your javascript code you have to use variable — Keval Bhatt
– Keval Bhatt, Commented Jun 2, 2015 at 11:17
So I declare my json file as a veriable in my javascript? But how do i fetch the external json file to begin with? — Mike
– Mike, Commented Jun 2, 2015 at 11:26

Quentin · Accepted Answer · 2015-06-02 11:12:44Z

3

<script type="text/javascript" src="rectangles.json"></script>

JSON is a data format inspired by JavaScript literal syntax. It is, however, not JavaScript. You can't load it using a <script> element. You need to either:

Write some JavaScript to fetch the JSON using, for example, the XMLHttpRequest object (this is commonly known as Ajax).
Change the JSON to a JavaScript program that creates a global variable you can access
Change the JSON to a JavaScript program that calls a function and passes the data as an argument

answered Jun 2, 2015 at 11:12

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

Mike Over a year ago

Okay, that makes sense. Would you happen to know why Netbeans is throwing a 'Syntax error: Unexpected Token ':'' on line 2 of my JSON file?

Quentin Over a year ago

@Mike — Because it is trying to treat it as JavaScript, which it isn't.

Austin Hunt · Accepted Answer · 2015-06-01 22:08:48Z

0

You'll get such an error if you're trying to evaluate your JSON file as JavaScript. I copied and pasted your string into the Chrome console and got the same error. But, if I set that JSON string to a variable it works:

    var awesomeRect = {  
       "rectangles":[  
    {  
      "x":0,
      "y":0,
      "width":20,
      "height":10,
      "color":"red"
   },
   {  
      "x":25,
      "y":0,
      "width":20,
      "height":10,
      "color":"red"
   }
 ]
 }

answered Jun 1, 2015 at 22:08

Austin Hunt

1366 bronze badges

2 Comments

Mike Over a year ago

I pasted this into a JSON editor and it says that it is not valid. Is that expected?

Craicerjack Over a year ago

Yes this is expected because once you add the var awesomeRect = line it is no longer valid as a json file

TaoPR · Accepted Answer · 2015-06-01 22:13:55Z

0

Your JSON file looks fine so you might probably try to parse the object which is already a JSON format after you read it from file.

For example if you read it from file and say you store it in a variable rect:

var rect = {  
    "rectangles":[  
    {  
        "x":0,
        "y":0,
        "width":20,
        "height":10,
        "color":"red"
    },
    {  
       "x":25,
       "y":0,
       "width":20,
       "height":10,
       "color":"red"
    }
    ]
}

If you parse that such variable rect again, you'll get an error.

JSON.parse(rect); // throw you an error: Unexpected token

Because the variable is already a JSON format.

answered Jun 1, 2015 at 22:13

TaoPR

6,0783 gold badges28 silver badges38 bronze badges

Collectives™ on Stack Overflow

JSON array error

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related