Geek Answers Handbook

I can not find the result in my div

I get no result in 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 could not get any of the results

I want my result to be displayed in an html file when the btnsearch button was pressed, but nothing is displayed.

+6
source share
3 answers

Well, the code should work, and I assume that the JSON code should look 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 returned data is one object in the array, in the format that you indicated in the question, then you can change data.recipes to data and check if it works.

Update:

According to your comment about what timeline.php does, I think it only returns one result. so you can change 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"); }); });
+1
source

You do not have the wrong path added, not:

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

Must not 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 reinitialize the content at each iteration, should 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 that you get an error in the loop itself, you pass "i" as the first parameter, but you only refer to me as the name of the parameter. This will not work, as you think, I will be perceived as part of the variable name, not replaced by the value of "i", this is not a macro. If this is your intention, use:

  post[i].i_name

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

eg:

  $.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"); });
+1
source

I do not see the array in your received json. Are there recipes in your data.resipes wtah code? If I understand your code correctly, your json should be like

 {"recipes" : [{recipe 1}, {recipe 2}]}
0
source

More articles:


All Articles