Syntax:Error JSON.parse, When trying to load data for protovis

Question

Hi I'm learning how to work with protovis, so far so good, but now I stumbled upon a problem I can't seem to solve.

The following is the code. (I have the latest jquery loaded in my headers)

<script type="text/javascript+protovis"> 
var dataURL = "http://eagereyes.org/media/2010/protovis-primer/earthquakes.json";

var JSONdata = $.ajax({ type: "GET", url: dataURL, async: false }).responseText;
var earthquakes = JSON.parse(JSONdata);

var width = 560;
var height = 245;

var barWidth = width/earthquakes.length;
var gap = 2;

new pv.Panel().width(width).height(height+5)
    .add(pv.Bar)
        .data(earthquakes)
        .bottom(0)
        .width(barWidth-gap)
        .height(function(d) d.Magnitude * (height/9))
        .left(function() this.index * barWidth)
    .root.render();

When I try this in Firefox i get this alert:

Syntax:Error JSON.parse

I have validated the JSON on http://www.jsonlint.com/ already. So the problem must be elsewhere.

Anyone knows whats going on here?

Edit

I tried loading the same data in the protoviewer app: http://www.rioleo.org/protoviewer/ and it works. So it must be the code.

Answer 1

Have you tried a regular async callback instead of the synchronous approach? Like:

var dataURL = "http://eagereyes.org/media/2010/protovis-primer/earthquakes.json";

$.ajax({
  type: "GET",
  url: dataURL,
  success: function(response) {
    var earthquakes = JSON.parse(JSONdata);

    var width = 560;
    var height = 245;

    var barWidth = width/earthquakes.length;
    var gap = 2;

    new pv.Panel().width(width).height(height+5)
        .add(pv.Bar)
            .data(earthquakes)
            .bottom(0)
            .width(barWidth-gap)
            .height(function(d) d.Magnitude * (height/9))
            .left(function() this.index * barWidth)
        .root.render();     
  }
});

Also, is that JSON file located on the same server that the page making the request shows in the address bar (exactly http://eagereyes.org)?

Finally, the manual JSON.parse() step isn't necessary. If you add the dataType: 'json' parameter, $.ajax() will automatically deserialize as JSON and uses JSON.parse() where available.

Answer 2

Add a semi-colon ; to the end of your response

Answer 3

Which browser are you using? Some browsers don't define the JSON object. You can download a script from the URL below which will define the JSON object if it doesn't already exist.

https://github.com/douglascrockford/JSON-js

You can check whether JSON is defined as follows:

alert(JSON);

update

OK next thing I'd do is check that the ajax call is actually returning the corect data. Change your code to print the JSON returned from the ajax call.

var JSONdata = $.ajax({ type: "GET", url: dataURL, async: false }).responseText;
alert(JSONdata);
var earthquakes = JSON.parse(JSONdata);

Answer 4

$.ajax({
            type: "POST",
            url: "saveChangesInEditing.php",
            data: idObject,
            success: function(data){
                         dataObject = JSON.parse(data);
                         $("input[name = 'id']").val(dataObject.id);
                         $("input[name='full_name']").val(dataObject.full_name);
                         $("input[name='sport']").val(dataObject.sport);
                         $("input[name='idol']").val(dataObject.idol);
                    },
            error: function(data){
                     alert("error!" + data);
                   }
        });