如何像数组一样使用索引访问从Ajax post方法调用返回的数据

Question

Here is my code and it is not working to success function. Is there a possibility that I am not specifying in the right way tr and td elements

$(document).ready(function () {
    $("#search").blur(function () {
        //alert("ilir");
        $.ajax({
            type: "POST",
            data: { "barkodi": $(this).val() },
            dataType: 'json',
            success: function (data) {
                $('tr[class!="info"]').remove().after(function () {
                    $.each(function (index, data) {
                        $("tr").append(
                            $("<tr></tr>").html(
                            $("<td></td>").text(data[0].Barkodi),
                            $("<td></td>").text(data[0].Emri),
                            $("<td></td>").text(data[0].Cmimi),
                            $("<td></td>").text(data[0].Sasia))
                            );
                    });
                });
            }
        });
    });
})

And here is my controller and action method I dont where is my bug here :(

[HttpPost]
    [AllowAnonymous]
    public JsonResult Index(string barkodi)
    {
        var produkti = _context.Produktets.SingleOrDefault(x => x.Barkodi == barkodi);

        List<ProduktetCustom> prod = new List<ProduktetCustom>();
        ProduktetCustom produkt = new ProduktetCustom()
        {
            Barkodi = produkti.Barkodi,
            Emri = produkti.Emri,
            Sasia = produkti.Sasia,
            Cmimi = produkti.Cmimi,
            Pershkrimi = produkti.Pershkrimi,
            IsDeleted = produkti.IsDeleted,
            DataModifikimit = produkti.DataModifikimit,
            DataShtimit = produkti.DataShtimit
        };

        prod.Add(produkt);
        return Json(prod,JsonRequestBehavior.AllowGet);
    }

Answer 1

You should use forEach function defined in Array instead of $.each .

Your code will look like this:

success: function (data) {
    $('tr[class!="info"]').remove().after(function () {
        data.forEach(function (item, index) {
            $("tr").append(
                $("<tr></tr>").html(
                    $("<td></td>").text(item.Barkodi),
                    $("<td></td>").text(item.Emri),
                    $("<td></td>").text(item.Cmimi),
                    $("<td></td>").text(item.Sasia)
                )
            );
        });
    });
}

Answer 2

You're correct; the issue is how you're adding the elements in the html() method. It accepts only a string or a function. You're also looping through the data array, but repeatedly adding only the content from the first item. You're also attempting to place content after() an element which has been removed, which won't work.

Try this:

success: function (data) {
  var html = data.map(function(o) {
    return `<tr><td>${o.Barkodi}</td><td>${o.Emri}</td><td>${o.Cmimi}</td><td>${o.Sasia}</td></tr>`;
  }).join('');
  $('table tbody').append(html);
}

 var data = [{ Barkodi: 'Barkodi 1', Emri: 'Emri 1', Cmimi: 'Cmimi 1', Sasia: 'Cmimi 1', }, { Barkodi: 'Barkodi 2', Emri: 'Emri 2', Cmimi: 'Cmimi 2', Sasia: 'Cmimi 2', }] var html = data.map(function(o) { return `<tr><td>${o.Barkodi}</td><td>${o.Emri}</td><td>${o.Cmimi}</td><td>${o.Sasia}</td></tr>`; }).join(''); console.log(html); $('table tbody').append(html); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table><tbody></tbody></table> 

Answer 3

Not tested but you can try parseJSON .

var objArray = $.parseJSON(data);
$.each(function (index, objArray) {
//other stuff
});