JQuery getJSON - ajax parseerror

Question

I've tried to parse the following json response with both the JQuery getJSON and ajax:

[{"iId":"1","heading":"Management Services","body":"<h1>Program Overview</h1><h1>January 29, 2009</h1>"}]

I've also tried it escaping the "/" characters like this:

[{"iId":"1","heading":"Management Services","body":"<h1>Program Overview <\/h1><h1>January 29, 2009<\/h1>"}]

When I use the getJSON it dose not execute the callback. So, I tried it with JQuery ajax as follows:

$.ajax({
    url: jURL,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    beforeSend: function(x) {
        if(x && x.overrideMimeType) {
            x.overrideMimeType("application/j-son;charset=UTF-8");
        }
    },
    success: function(data){
        wId = data.iId;
        $("#txtHeading").val(data.heading);
        $("#txtBody").val(data.body);
        $("#add").slideUp("slow");
        $("#edit").slideDown("slow");
    },//success
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("XMLHttpRequest="+XMLHttpRequest.responseText+"\ntextStatus="+textStatus+"\nerrorThrown="+errorThrown);
    }
});

The ajax hits the error ans alerts the following:

XMLHttpRequest=[{"iId":"1","heading":"Management Services","body":"<h1>Program Overview </h1><h1>January 29, 2009</h1>"}]

textStatus=parseerror

errorThrown=undefined

Then I tried a simple JQuery get call to return the JSON using the following code:

$.get(jURL,function(data){
    var json = eval("("+data+");");
    wId = json.iId;
    $("#txtHeading").val(json.heading);
    $("#txtBody").val(json.body);
    $("#add").slideUp("slow");
    $("#edit").slideDown("slow");
})

The .get returns the JSON, but the eval comes up with errors no matter how I've modified the JSON (content-type header, other variations of the format, etc.)

What I've come up with is that there seem to be an issue returning the HTML in the JSON and getting it parsed. However, I have hope that I may have missed something that would allow me to get this data via JSON. Does anyone have any ideas?

Answer 1

Did you try XML-encoding the HTML (i.e. <H1>)?

Answer 2

You could have it return as text and then parse it with the json.org parser
To see if it works any differently

Answer 3

First, try to pinpoint if the problem is with general JSON encoding/decoding. try simpler objects, with numbers and plain strings, then with quoted HTML.

After you get JSON working, you really should really consider removing the HTML from there. Much better is to move just data, and leave presentation details to the templates. When using AJAX, that means a hidden template in the HTML, and use jQuery to replicate it and fill with the data. check any of the jQuery template plugins. Of these, jTemplates is a common favorite.

Answer 4

I think you are asking wrong question. Using $.getJSON() is much easier, and if you got problem with it, would be better to ask for $.getJSON() than for $.ajax(). You might also find useful looking at getJSON function source code, because I see, you got a lot of useless stuff there with mimeTypes. That's not the way.

Answer 5

The value you are trying to parse is wrapped in brackets [], which means it is an array. You are trying to eval an array. Try to eval the first element of the array, and it should work...

var json = eval("("+data[0]+");");

Also, I would recommend using the JSON.parse() provided here instead of calling eval() directly.

Answer 6

The JSON string you have is an array with 1 object inside of it, so to access the object you have to access the array first. With a json.php that looks like this:

[
    {
        "iId": "1",
        "heading": "Management Services",
        "body": "<h1>Program Overview</h1><h1>January 29, 2009</h1>"
    }
]

I just tried this

$.getJSON("json.php", function(json) {
    alert(json[0].body); // <h1>Program Overview</h1><h1>January 29, 2009</h1>
    alert(json[0].heading); // "Management Services"
    alert(json[0].iId); // "1"
});

I also tried this:

$.get("json.php", function(data){
    json = eval(data);
    alert(json[0].body); // <h1>Program Overview</h1><h1>January 29, 2009</h1>
    alert(json[0].heading); // "Management Services"
    alert(json[0].iId); // "1" 
});

And they both worked fine for me.

Answer 7

you might have uncoded carriage returnsor line feeds in your json data. Check to see if data is wrapping more than one line in a text editor with line-wrap turned off.

Answer 8

Pleas note that in the question there is a syntax error. The line with

x.overrideMimeType("application/j-son;charset=UTF-8");

should read

x.overrideMimeType("application/json; charset=UTF-8");

This makes a big difference too.

Answer 9

Remove the [], on front and last on JsonData, and it work.

Answer 10

If anyone is still having problems with this it's because your response needs to be a JSON string and content-type "application/json".

Example for HTTP in asp.net (c#):

public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "application/json";
        context.Response.Write("{ status: 'success' }");
    }

hth,

Matti

Answer 11

I received a similar error. Took me a while to find out - little did I know that PHP has not (natively) supported JSON since PHP5.2. Critical reminder...