是什么导致我的每个循环中出现 Uncaught TypeError？答案

【问题标题】：What is causing my Uncaught TypeError in my each loop?是什么导致我的每个循环中出现 Uncaught TypeError？
【发布时间】：2018-07-06 15:45:13
【问题描述】：

我正在返回一个 ID 列表，用于过滤 Kendoui 网格中的数据。 Id 是使用 Ajax 从我的 MVC 应用程序中的控制器返回的，然后该函数应该循环通过返回的对象，并使用过滤器相应地更新数据源。

虽然我可以从对象中获取结果，但我也会收到导致函数停止的错误。错误是：

Cannot use 'in' operator to search for 'length' in 5

我尝试过使用JSON.parse，但没有奏效。我的代码如下：

 $.ajax({
        url: "@Url.Action("GetTabs")",
        type: "GET",
        data: { 'Name' : 'John' },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
            tabInfo(response);
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.status);
            console.log(textStatus);
            console.log(errorThrown);
        }
    });

function tabInfo(e) {
        let filters = [];
        let tags = $("#tags");
        let grid = $("#CarGrid");

        var idFilter = {
            logic: "or",
            filters: []
        };

        $.each(e, function (index, value) {
            $.each(value, function (_, d) {
                idFilter.filters.push({
                    field: "Id",
                    operator: "eq",
                    value: d.Id
                    })
                filters.push(idFilter);
            })
        });
        grid.dataSource.filter({
            logic: "and",
            filters: filters
        });
    }

我在网上搜索时，看到很多帖子说是因为你需要解析返回的数据，我试图这样做，但最终得到了相同的结果。我可以看到它返回了结果，但不久之后就出现了这个错误。

更新

Ajax 响应是：

{Data: Array(5), Total: 5, AggregateResults: null, Errors: null}
AggregateResults
:
null
Data
:
Array(5)
0 : {Id: 1, TabName: "Test Tab", UserName: "John", UserEmail: "John", CreatedAt: "/Date(1530867600000)/", …}
1 : {Id: 2, TabName: "Test Tab 2", UserName: "John", UserEmail: "John", CreatedAt: "/Date(1530873780000)/", …}
2 : {Id: 3, TabName: "Test Tab 3", UserName: "John", UserEmail: "John", CreatedAt: "/Date(1530874140000)/", …}
3 : {Id: 4, TabName: "Test Tab 4", UserName: "John", UserEmail: "John", CreatedAt: "/Date(1530874260000)/", …}
4 : {Id: 5, TabName: "Test Tab 5", UserName: "John", UserEmail: "John", CreatedAt: "/Date(1530874320000)/", …}
length : 5
__proto__ : Array(0)
Errors : null
Total : 5

我使用两个 each 循环来提取数据不正确吗？

【问题讨论】：

你的 AJAX 响应是什么？
您的数据结构如何/看起来如何？
请建立一个minimal reproducible example
您对 jqeury API 的使用似乎不正确 - 尝试使用 $(e).each(function ... 而不是 $.each(e, function ...（对于 value 的内部迭代也是如此）。顺便说一句，你为什么要使用 jquery 迭代器呢？ e.forEach ( ( item, index ) => { ... } ); 应该可以正常工作。如果您知道您将从 ajax 接收的数据全部为 json，您可以将 $.ajax 替换为 $.getJSON。
@collapsar 如果@yanayaya 使用$(e).each(function ... 则不正确，$(e).each 用于迭代DOM 元素的集合，而@yanayaya 试图迭代数组，因此，使用@ 987654334@ 是正确的，但使用 Array.prototype.forEach 就足够了

标签： javascript jquery ajax model-view-controller

【解决方案1】：

查看您的 ajax 响应，我认为您不需要两个 $.each，而只需遍历 response.Data，这应该足够了

$.each(e.Data, function (_, d) {
    idFilter.filters.push({
        field: "Id",
        operator: "eq",
        value: d.Id
        })
    filters.push(idFilter);
});

现在，正如@collapsar 所评论的那样，如果我们在响应中得到的是Array，则不需要使用$.each，这也应该可以使用，但使用Array.prototype.forEach

e.Data.forEach(function (d) {
    idFilter.filters.push({
        field: "Id",
        operator: "eq",
        value: d.Id
        })
    filters.push(idFilter);
});

希望对你有帮助

【讨论】：