Json从服务器到HTML表

Question

I have a function that add table rows once the button was clicked and i have a json data i want data to be added to that table but the result says undefined in console can anyone help

function addRow() 
{
    var rowCount = $("#detailTable>tbody>tr").length;
    $("#detailTable>tbody").append('<tr><td><input name="ProductName" required></td><td><input name="Qty" class="Qty" required></td><td><input name="Price" required></td><td><input class="total" name="total" readonly></td><td><a class="del" href="#">Delete</a></td></tr>')
    $("tr:odd").css("background-color", "#ccc");
}     

I have a mvc where json result is fetched its working fine when i apply to html its not working can any one help

$.get('@Url.Content("~")Home/GetSalesDetail', { invoiceId: salesHeaderData.invoiceId })
    .done(function (salesDetailData) {
        console.log(salesDetailData);
        for (var j = 0; j < salesDetailData.length; j++) {
            var row = $("<tr />")
            $("#detailTable").append(row);
            row.append($("<td>" + salesDetailData.ProductName + "</td>"));
            row.append($("<td>" + salesDetailData.Qty + "</td>"));
            row.append($("<td>" + salesDetailData.Price + "</td>"));
        }
    })
})

Answer 1

As object is an array you need to provide index to read it. it has to be like this

for (var j = 0; j < salesDetailData.length; j++) {
  var row = $("<tr />")
  $("#detailTable").append(row);
  row.append($("<td>" + salesDetailData[j].ProductName + "</td>"));
  row.append($("<td>" + salesDetailData[j].Qty + "</td>"));
  row.append($("<td>" + salesDetailData[j].Price + "</td>"));
}

give special attention to [j] in salesDetailData[j].ProductName