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

时间:2017-07-07 11:21:05

标签: javascript jquery ajax asp.net-mvc

这是我的代码,它不适用于成功功能。是否有可能我没有以正确的方式指定tr和td元素

$(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))
                            );
                    });
                });
            }
        });
    });
})

这是我的控制器和动作方法我不知道我的错误在哪里:(

[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);
    }

3 个答案:

答案 0 :(得分:0)

您应该使用forEach中定义的Array功能代替$.each

您的代码如下所示:

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)
                )
            );
        });
    });
}

答案 1 :(得分:0)

你是对的;问题是您如何在html()方法中添加元素。它只接受字符串或函数。您还会循环遍历data数组,但只重复添加第一个项目中的内容。您还尝试将内容after()放置在已删除的元素中,但该元素无法正常工作。

试试这个:

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);
}

&#13;
&#13;
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);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table><tbody></tbody></table>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

未经测试,但您可以尝试parseJSON

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