I'm unable to find a result in my div

Question

I'm not getting any result in my div

Here is my jquery

$('#btnsearchres').click(function(){
                var $server;
                var content;
                $server = 'http://localhost/XDK/';
   $.getJSON("http://localhost/XDK/timeline.php",function(data){

      $.each(data.recipes, function(i,post){
        content = '<p>' + post.i_name + '</p>';
        content += '<p>' + post.i_recipe + '</p>';
        content += '<img src="http://localhost/xdk/'+post.image_thumb+'"/>';
        content += '<br/>';

      });
       $(content).appendTo("#recipes");
    });

My JSON

{
    "i_id": "1",
    "i_name": "Biryani",
    "i_category": "Pakistani",
    "i_Uploader_Name": "Nabeel",
    "i_recipe": "2 cups Basmati- RIce \r\n3\/4kg Chicken pieces \r\nOnion 3 large, slIced \r\n1 cup Yoghurt \r\n1 tsp Ginger paste \r\n1\/2 tsp Garlic paste \r\n1 tsp Green chilli paste \r\n1\/2 cup Tomato puree \r\n2 tsp Red Chilli powder \r\n1 tsp Turmeric powder \r\n1 tsp Cumin powder (roasted) \r\n1\/2 tsp Cardamom powder \r\n2 tsp Garam masala powder \r\n1\/2 cup Milk \r\nA pinch Saffron \r\n1 tsp Coriander powder \r\nGreen Coriander leaves 2 tbsp, chopped \r\nWater 3 1\/2 cups \r\n7 tbsp Oil \r\nSalt as required\r\n\r\nMETHOD :\r\n1. Make a mixture with t",
    "i_tags": "",
    "i_ingredients": "Chicken Rice Ginger Garlic Garam-masala Green-chilli-paste Turmeric-powder Safron",
    "i_dateofadd": "2016-01-24",
    "i_rate": "0",
    "image_name": "Biryani-main1.jpg",
    "image_path": "images\/Biryani-main1.jpg",
    "image_thumb": "thumb\/Biryani-main1.jpg"
}

and I have a div called recipes in my html

 <input id="btnsearchres" type="button" class="btn btn-danger" value="Search"/>
            <input id="btnaddrec" type="button" class="btn btn-danger" value="Add Recipe"/>
  </div>
        <div id="recipes">
  </div>

i couldnt get any of the results

I want my result to be seen on html file when my btnsearch button is pressed but it is not showing a thing

Answer 1

Well the code should work and I assume the JSON code should be like this:

{
  "recipes" : [
     {
       "i_id": "1",
       "i_name": "Biryani",
       "i_category": "Pakistani",
       "i_Uploader_Name": "Nabeel",
       "i_recipe": "2 cups Basmati- RIce \r\n3\/4kg Chicken pieces \r\nOnion 3 large, slIced \r\n1 cup Yoghurt \r\n1 tsp Ginger paste \r\n1\/2 tsp Garlic paste \r\n1 tsp Green chilli paste \r\n1\/2 cup Tomato puree \r\n2 tsp Red Chilli powder \r\n1 tsp Turmeric powder \r\n1 tsp Cumin powder (roasted) \r\n1\/2 tsp Cardamom powder \r\n2 tsp Garam masala powder \r\n1\/2 cup Milk \r\nA pinch Saffron \r\n1 tsp Coriander powder \r\nGreen Coriander leaves 2 tbsp, chopped \r\nWater 3 1\/2 cups \r\n7 tbsp Oil \r\nSalt as required\r\n\r\nMETHOD :\r\n1. Make a mixture with t",
       "i_tags": "",
       "i_ingredients": "Chicken Rice Ginger Garlic Garam-masala Green-chilli-paste Turmeric-powder Safron",
       "i_dateofadd": "2016-01-24",
       "i_rate": "0",
       "image_name": "Biryani-main1.jpg",
       "image_path": "images\/Biryani-main1.jpg",
       "image_thumb": "thumb\/Biryani-main1.jpg"
    }
  ]
}

But if the data that is returned is a single object in a array, in the format the you have given in the question, then you might want to change the data.recipes to data and check if it works.

Update:

According your comment on what the timeline.php does, I think it returns only one result. so you might want to change the javascript to something like this:

$('#btnsearchres').click(function(){
                var $server;
                var content;
                $server = 'http://localhost/XDK/';
   $.getJSON("http://localhost/XDK/timeline.php",function(data){
        content = '<p>' + data.i_name + '</p>';
        content += '<p>' + data.i_recipe + '</p>';
        content += '<img src="http://localhost/xdk/'+data.image_thumb+'"/>';
        content += '<br/>';
        $(content).appendTo("#recipes");
    });
});

Answer 2

Don't you have the append the wrong way around, instead of:

   $(content).appendTo("#recipes");

Shouldn't it be:

    $('#recipes').append(content);

In your for loop:

    $.each(data.recipes, function(i,post){
        content = '<p>' + post.i_name + '</p>';
        content += '<p>' + post.i_recipe + '</p>';
        content += '<img src="http://localhost/xdk/'+post.image_thumb+'"/>';
        content += '<br/>';
    });
    $(content).appendTo("#recipes");

You re-initialise the content on each iteration, shouldn't you then move the append statement as the last line inside the loop?

    $.each(data.recipes, function(i,post){
        content = '<p>' + post.i_name + '</p>';
        content += '<p>' + post.i_recipe + '</p>';
        content += '<img src="http://localhost/xdk/'+post.image_thumb+'"/>';
        content += '<br/>';
        $(content).appendTo("#recipes");
    });

I think you are getting an error in the loop itself, you are passing 'i' as the first parameter, but you only reference I as part of the parameter name. This will not work as you think, I will be taken as part of the variable name not replaced with the value of 'i', it isn't a macro. If this is your intention then use:

    post[i].i_name

Also I would suggest using an alternative name other than post, something like aryRecipes, where the prefix ary tells everyone that the variable is an array. Try using some console.dir() statements in the loop to verify the values.

e.g:

    $.each(data.recipes, function(i,post){
        console.log("i :" + i + ", post:");
        console.dir(post);
        content = '<p>' + post.i_name + '</p>';
        content += '<p>' + post.i_recipe + '</p>';
        content += '<img src="http://localhost/xdk/'+post.image_thumb+'"/>';
        content += '<br/>';
        $(content).appendTo("#recipes");
    });