Question

I get a JSON Object from my PHP:

{
"Data":{
       "Recipes":{
                    "Recipe_7":{
                                 "ID":"7",
                                 "TITLE":"Wurstel"
                               },
                    "Recipe_43":{
                                  "ID":"43",
                                  "TITLE":"Wurstel2"
                                 }
                 }
        },
"Message":null,
"Code":200
}

and i want to parse it in JS to get the id and the title

My Code:

  var obj = jQuery.parseJSON(xmlhttp.responseText);

 $.each(obj, function(){

 document.getElementById("txtHint").innerHTML = this.recipes.toString();
 });

The problem is that i always get UNDEFINED

My Quest:

How to parse the obj to get the titel and the id of each Recipe

Answer 1

var obj;

try {
    obj = jQuery.parseJSON(xmlhttp.responseText);
} catch (e) {
   // Invalid JSON
}

if (obj) {
    var recipes = obj.Data.Recipes;

    for (var x in recipes) {
        // recipes[x].ID
        // recipes[x].TITLE
    }
}

As you’re already using the jQuery library, you might want to look at using the AJAX module in jQuery. It stops you worrying about the browser differences (XMLHttpRequest vs ActiveX) etc.

You can then use the .getJSON() method, and you’ll receive a parsed response for you, making things slightly easier:

jQuery.getJSON('yourUrl.php', function (obj) {  // obj is now a JS object
    var recipes = obj.Data.Recipes;

    for (var x in recipes) {
        // recipes[x].ID
        // recipes[x].TITLE
    }        
});

If you’re adament you want to use jQuery.each, replace:

var recipes = obj.Data.Recipes;

for (var x in recipes) {
    // recipes[x].ID
    // recipes[x].TITLE
}  

with:

jQuery.each(obj.Data.Recipes, function () {
    // this.ID
    // this.TITLE
});

Be vary aware that JavaScript is case sensitive; DATA !== Data and ID != id.