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\":\"


        

Answer 1

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

Answer 2

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 3

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 4

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 5

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}]