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

Question

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

产品名称：a1 产品名称：a2 删除商家 1 的按钮 删除商家 2 的按钮 但我想像这样显示这些数据 商户名称：abc 产品名称：a1 删除 Merchant1 的按钮 商户名称：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();
});

FIDDLE