मेरी प्रतिक्रिया कुछ इस तरह दिखती है:

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

मेरा एचटीएमएल कोड इस तरह दिखता है:

  <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 और जावास्क्रिप्ट के लिए बहुत नया हूँ।

छवि इस तरह दिखती है: स्थिर सामग्री को बदलने और प्रतिक्रिया से बदलने की आवश्यकता है

यहाँ मेरी स्क्रिप्ट है कि मुझे प्रतिक्रिया मिल रही है: नीचे इस स्क्रिप्ट के कॉल पर मुझे नियंत्रक वर्ग से मेरी प्रतिक्रिया मिल रही है

   function getCuisines()
    {
       $.ajax({
              url: "<%=dashboardURL%>getCusines",
              type: "GET", 
              success: function(response)
                          {
                            alert(response); }
              }); 
    }
-2
Manju 31 मार्च 2018, 09:19

3 जवाब

सबसे बढ़िया उत्तर

1.आपको रिकॉर्ड पर पुनरावृति करने के लिए $.each() का उपयोग करने की आवश्यकता है।

2.id प्रति तत्व अद्वितीय होना चाहिए इसलिए मैं अपने उत्तर में id छोड़ रहा हूं

3.चेक-बॉक्स में एक समान मान होना चाहिए जिसे मैंने अपने उत्तर में जोड़ा है।

कार्य स्निपेट:-

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>

नोट:-

यदि आप json डेटा को PHP से a response के रूप में प्राप्त करने के लिए ajax का उपयोग कर रहे हैं तो अपने ajax कोड में dataType:'json', का उपयोग करें ताकि यह पार्स हो जाए डेटा स्वचालित रूप से।

अन्यथा $.each() का उपयोग करने से पहले आपको data = $.parseJSON(data); करना होगा

2
Alive to Die 31 मार्च 2018, 07:17

आप नीचे की तरह कुछ कोशिश कर सकते हैं,

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>
0
Alpesh Jikadra 31 मार्च 2018, 07:06

अनुसरण करने का प्रयास करें। मैंने स्ट्रिंग बनाई और फिर इसे जोड़ दिया।

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>
0
yajiv 31 मार्च 2018, 06:33