Need to append json response

Question

my response looks something like this:

[{
    "letter": "A",
    "data": [{
            "cuisine_id": "1",
            "cuisine_name": "American"
        },
        {
            "cuisine_id": "2",
            "cuisine_name": "Arabic"
        },
        {
            "cuisine_id": "3",
            "cuisine_name": "Asian"
        }
    ]
}, {
    "letter": "B",
    "data": [{
            "cuisine_id": "4",
            "cuisine_name": "Bakery"
        },
        {
            "cuisine_id": "7",
            "cuisine_name": "Burgers"
        }
    ]
}, {
    "letter": "N",
    "data": [{
        "images": "1.png",
        "cuisine_id": "14",
        "cuisine_name": "New Cuisine"
    }]
}]

My HTML code looks like :

  <ul class="filter-list">
     <li>
   <label class="capital-head">A</label>
   <ul class="clearfix dish-type">
      <li class="inp-checkbox">
         <input type="checkbox" value="" name="american" id="american">
         <label for="american">Arabic</label>
      </li>
      <li class="inp-checkbox">
         <input type="checkbox" value="" name="american" id="american"/>
         <label for="american">American</label>
      </li>
      <li class="inp-checkbox">
         <input type="checkbox" value="" name="asian" id="asian"/>
         <label for="asian">Asian</label>
      </li>
   </ul>
</li>
</ul>

I Need to make this static HTML code to dynamic. I am very new to jquery and javascript.

Image looks like this :

Here is my script that I am getting the response : on call of this script below I am getting my response from controller class

   function getCuisines()
    {
       $.ajax({
              url: "<%=dashboardURL%>getCusines",
              type: "GET", 
              success: function(response)
                          {
                            alert(response); }
              }); 
    }

what do you want to append your html to? is there a parent node? — Francesco B., Mar 31 '18 at 06:22
I just want to replace the static content of HTML code with response — Manju, Mar 31 '18 at 06:24
What is your equivalent html element from json key, like cuisine_id where to replace value of this key to html ? — Alpesh Jikadra, Mar 31 '18 at 06:26
does [this](https://stackoverflow.com/questions/5710798/automatically-generate-html-from-json) help? — Francesco B., Mar 31 '18 at 06:27
by the way, the reason they're downvoting you is that your question doesn't show your code. please edit it and include what you have attempted to do, even if it doesn't work. nobody is going to judge you — Francesco B., Mar 31 '18 at 06:28
at label, need to replace with cuisine_name, at value, need to replace with cuisine_id and this(A) need to replace with letter — Manju, Mar 31 '18 at 06:29
Possible duplicate of [JSON to HTML Table in ajax](https://stackoverflow.com/questions/46216482/json-to-html-table-in-ajax) — idream1nC0de, Mar 31 '18 at 06:34

Alive to die - Anant · Accepted Answer · 2018-03-31T07:17:28.200

1.You need to use $.each() to iterate over records.

2.id needs to be unique per element that's why I am leaving id in my answer

3.Check-box needs to have a corresponding value which I have added to my answer.

Working snippet:-

data = [{"letter":"A","data":[{"cuisine_id":"1","cuisine_name":"American"}, 
 {"cuisine_id":"2","cuisine_name":"Arabic"}, 
 {"cuisine_id":"3","cuisine_name":"Asian"}]},{"letter":"B","data": 
 [{"cuisine_id":"4","cuisine_name":"Bakery"}, 
 {"cuisine_id":"7","cuisine_name":"Burgers"}]},{"letter":"N","data": 
 [{"images":"1.png","cuisine_id":"14","cuisine_name":"New Cuisine"}]}];

var html = '';
$.each(data,function(key,value){
 html +='<li><label class="capital-head">'+data[key]['letter']+'</label><ul class="clearfix dish-type">';
 $.each(value.data,function(k,v){
  html +='<li class="inp-checkbox"><input type="checkbox" value="'+v.cuisine_id+'" name="'+v.cuisine_name+'"><label for="'+v.cuisine_name+'">'+v.cuisine_name+'</label></li>';
 });
  html +="</ul></li>";
});

$('#mydiv').html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="mydiv"></div>

Note:-

If you are using ajax to get the json data as a response from PHP then use dataType:'json', in your ajax code so that it will parse the data automatically.

Otherwise before using $.each() you have to do data = $.parseJSON(data);

@Manju glad to help you :):) – Alive to die - Anant Mar 31 '18 at 08:34 — Alive to die - Anant, Mar 31 '18 at 08:34

score 0 · Answer 2 · answered Mar 31 '18 at 06:33

Try following. I created string and then append it.

x=[{"letter":"A","data":[{"cuisine_id":"1","cuisine_name":"American"}, 
 {"cuisine_id":"2","cuisine_name":"Arabic"}, 
 {"cuisine_id":"3","cuisine_name":"Asian"}]},{"letter":"B","data": 
 [{"cuisine_id":"4","cuisine_name":"Bakery"}, 
 {"cuisine_id":"7","cuisine_name":"Burgers"}]},{"letter":"N","data": 
 [{"images":"1.png","cuisine_id":"14","cuisine_name":"New Cuisine"}]}];
 
str="";
x.forEach(function(e){
   str+='<li><label class="capital-head">'+e.letter+'</label><ul class="clearfix dish-type">';
   e.data.forEach(function(e1){
        str+='<li class="inp-checkbox"><input type="checkbox" value="" name="american" id="american"><label for="american">'+e1.cuisine_name+'</label></li>'
   });
   str+='</ul></li>';
});
$("#hi").append(str);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="hi"></ul>

Alpesh Jikadra · Answer 3 · 2018-03-31T07:06:08.227

You can try something like below,

var d = [
 {"letter":"A",
 "data":[
  {"cuisine_id":"1","cuisine_name":"American"}, 
  {"cuisine_id":"2","cuisine_name":"Arabic"}, 
  {"cuisine_id":"3","cuisine_name":"Asian"}
  ]
 },
 {"letter":"B",
 "data": [
  {"cuisine_id":"4","cuisine_name":"Bakery"}, 
  {"cuisine_id":"7","cuisine_name":"Burgers"}
  ]
},
 {"letter":"N",
 "data":  [
 {"images":"1.png","cuisine_id":"14","cuisine_name":"New Cuisine"}
 ]
 }
];

function generateHTML(){
 
 
 for(var i =0;i<d.length;i++){
  var li =  $("<li>");
  var dts = d[i];
  var label = $("<label>").attr("class","capital-head").html(dts['letter']);
  $(li).append(label);
  var ul = $("<ul>").attr("class","clearfix dish-type");
  $(li).append(ul);
  for(var j =0; j<dts['data'].length;j++){
   var dt =  dts['data'][j];
   var ulLi = $("<li>").attr('class','inp-checkbox');
   $(ulLi).append($("<input>").attr("type","checkbox").attr("name",dt['cuisine_name']).attr("id",dt['cuisine_name']));
   $(ulLi).append($("<label>").attr("for",dt['cuisine_name']).html(dt['cuisine_name']));
   $(ul).append(ulLi); 
  }
  $("#data").append(li); 
 }
 
}

li{
 list-style:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="button" id="generateHTML" onclick="generateHTML();" value="generateHTML"/>
<div id="data"></div>

Need to append json response

3 Answers3