javascript - Syntax:Error JSON.parse, When trying to load data for protovis - Stack Overflow

admin管理员组

文章数量:1392073

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 = ".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 / already. So the problem must be elsewhere.

Anyone knows whats going on here?

Edit

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

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/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./ 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/protoviewer/ and it works. So it must be the code.

• javascript
• ajax
• json
• protovis

Share Improve this question Follow edited Feb 15, 2012 at 0:18 bottleboot asked Jan 14, 2011 at 21:20 bottlebootbottleboot 1,69922 gold badges2626 silver badges4242 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

var dataURL = "http://eagereyes/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)?

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.

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

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./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);

$.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);
                   }
        });

本文标签： javascriptSyntaxError JSONparseWhen trying to load data for protovisStack Overflow