需要附加json响应

Question

我的回复是这样的：

[{
    "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"
    }]
}]

我的 HTML 代码如下所示：

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

我需要将这个静态 HTML 代码变成动态的。 我对 jquery 和 javascript 很陌生。

图像看起来像这样：

这是我收到响应的脚本： 在调用下面的这个脚本时，我从控制器类得到我的响应

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

Answer 1

尝试关注。我创建了字符串，然后附加它。

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>

Answer 2

1.您需要使用$.each() 来迭代记录。

2.id 每个元素都必须是唯一的，这就是我在回答中留下id 的原因

3.复选框需要有一个对应的值，我已经添加到我的答案中。

工作 sn-p：-

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>

注意：-

如果您使用ajax 从PHP 获取a response 的json 数据，则在您的dataType:'json', 代码中使用dataType:'json',，以便它会自动解析数据。

否则在使用$.each()之前你必须先做data = $.parseJSON(data);

Answer 3

你可以试试下面的方法，

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>