jQuery从json响应中向ul元素的li添加值和文本

Question

We want to bind json response to li elements with each element having value as id and text as name.

$.ajax({
  type: "GET",
  url: "/api/xyz/",
  dataType: "json",
  success: function(response) {
    var items = [];
    $.each(response, function(i, item) {
      items.push('<li</li>",{value:item.id,text:item.name}');
    });
    $('#formFieldCity ul').append(items.join(''));
  }
});

But no success, I don't see any binding. Can anyone help?

Answer 1

I think you mean

     var list = $('#formFieldCity ul'); //caching
     $.ajax({
       type: "GET",
       url: "/api/xyz/",
       dataType: "json",
       success: function (response) {
            var items = [];
            //Misplaced variable here: data instead of response
            $.each(response, function(i, item) {
                   var mapped = {value:item.id,text:item.name};
                   items.push(mapped)
                   list.append("<li id=\""+item.id+"\">"+item.name+"</li>");

            });
       }
    });

This will basically print a json in your HTML. Hope I got what you wanted.

EDIT: If your response is an array, consider using a simple for loop, which is about 8x faster then the jQuery.each

for(var i=0; i<response.length; i++){
    var mapped = {value:response[i].id,text:response[i].name};
    items.push(mapped)
    list.append("<li id=\""+mapped.value+"\">"+mapped.text+"</li>");
}

Answer 2

you should write like this:

$.each(data, function(i, item) {
        items.push('<li id="'+item.id+'">'+item.name+'</li>');
    });