how to show json (array)response in html page using javascript jquery

Question

i have some json response which contains data in array format.i have to display that data one by one in html page.in my html page i added some div element for merchantname,productname and remove button.and json data contanins array of same product name,merchant name,remove button for specific merchant.now when i am displaying data in page its showing me all the name of merchant after that list of product.means it is like merchant name:abc merchantname:xyz

productname:a1 productname:a2 remove button for merchant1 remove button for merchant2 but i want to display this data like merchantname:abc productname:a1 remove button for merchnant1 merchantname:xyz productname:a2 remove button for merchnant2 this is the code

$("#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

Based on my understanding of your problem I have written a small piece of code which may help answer the question.

I'll try to answer any question of yours.

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