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

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

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

3.Check-box需要有一个相应的值，我已将其添加到我的答案中。

工作代码段： -

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从json获取a response数据为PHP，请在dataType:'json',代码中使用ajax，以便它会自动解析数据。

否则在使用$.each()之前，您必须执行data = $.parseJSON(data);

Answer 2

试试以下内容。我创建了字符串然后追加它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

您可以尝试下面的内容，

＆＃13;

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);	
	}
	
}

＆＃13;

li{
	list-style:none;
}

＆＃13;

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

＆＃13;

需要附加json响应

3 个答案: