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

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 2

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 3

This is a working example and tested!

<script type="text/javascript">

function fetchData() {
var dataurl = "pie.json";
$.ajax({
    url: dataurl,
    cache: false,
    method: 'GET',
    dataType: 'json',
    success:  function(series) {
        var data = [];
        //alert(series.length);
        for (var i=0; i<series.length;i++){
            data[i]=series[i];
        }

        $.plot(
                $("#placeholder"), 
                data, 
                {
                     series: {
                       pie: {
                         show: true,
                         label: {
                           show: true
                         }
                     }
                    },
                    legend: {
                      show: true
                    }
                  }
       );
     }
});

   //setTimeout(fetchData, 1000);
}
</script>

And the json source is the following (pie.json):

[{ "label": "Series1",  "data": 10},
{ "label": "Series2",  "data": 30},
{ "label": "Series3",  "data": 90},
{ "label": "Series4",  "data": 70},
{ "label": "Series5",  "data": 80},
{ "label": "Series6",  "data": 110}]

Answer 4

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 5

删除JsonData上前面和后面的[]，它可以正常工作。

Answer 6

Disabling Firebug Lite fixed this problem for me.

Bug with combination of: jQuery 1.4, ajax/json, Firebug Lite and IE 8

Answer 7

您是否尝试过对HTML进行XML编码（即＆lt; H1＆gt;）？

Answer 8

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

Answer 9

also try this

$.ajax({
    url: url,
    data:datas,
    success:function(datas, textStatus, jqXHR){
    var returnedData = jQuery.parseJSON(datas.substr(datas.indexOf('{')));
})};

in my case server responds with unknow character before '{'

Answer 10

不要使用数组框，并确保正确格式化数据：

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

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...

Answer 12

Yesterday at $. Ajax still no mistakes, today is quoted the mistake, some say parsererror jquery version of the problem, what I use is jquery-1.3.2.min.js, yesterday. This edition also done, today is washed-up. Data sources: no change. Don't know what reason be?

Answer 13

It is maybe because your output buffer is not empty, so AJAX receive bytes which don't belong to the JSON.

Try clean buffer with ob_clean() on server side just before output your json with echo or die() . And you don't need to specify contentType , I think for you default value will work correctly.

I had the same problem and it solve it.

Hope to help you.

Answer 14

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 15

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 16

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 17

in my case, the error was caused by a html tag in the json.

INCORRECT (parsererror)

{"msg": "Gracias,< br >Nos pondremos en contacto."}

CORRECT

{"msg": "Gracias, nos pondremos en contacto."}

BROWSER: IE7/IE8