如何使用javascript jquery在html页面中显示json（array）响应

Question

我有一些json响应，其中包含数组格式的数据。我必须在html页面中逐一显示该数据。在我的html页面中，我为商人名称，产品名称和删除按钮添加了一些div元素。并且同一产品的json数据包含数组名称，商家名称，特定商家的删除按钮。现在当我在页面中显示数据时，在该产品列表之后向我显示商家的所有名称。意味着它就像商家名称：abc商人名称：xyz

产品名称：a1产品名称：a2商人1的移除按钮商人2的移除按钮，但我要显示此数据，例如商人名称：abc产品名称：a1的merchnant1移除按钮商人名称：xyz产品名称：a2 Merchant2的移除按钮这是代码

$("#merchantname").append("<font color='green'>"+(responseObj.merchants.merchantname[i])+"</font>"+"\n");
    $("#productname").append(responseObj.merchants.productname[i]+"\n");

    $("#remove").append("<input type='button' value='remove' onClick='remove(needID)'>"+"</input>"+"\n");

Answer 1

根据对您问题的了解，我编写了一小段代码，可能有助于回答问题。

我会尽力回答您的任何问题。

//Create the dom from the json response
$.each(responseObj.merchants,function(index){
    record=$('<div/>',{'class':'record'});
    merchantname=$('<span/>',{'class':'merchant'});
    merchantname.text(responseObj.merchants[index].merchantname);

    productname=$('<span/>',{'class':'product'});
    productname.text(responseObj.merchants[index].productname);

    remove=$('<input/>',{'class':'remove','val':'Remove','type':'button'});

    record.append(merchantname).append(productname).append(remove);

    $('#view').append(record);
});

// Handler for the remove button
$(document).on('click','.remove',function(){
// Statement to remove record
    $(this).closest('.record').remove();
});

小提琴