将项推送到Ajax方法中的新数组中

Push item into new array within Ajax method

本文关键字：新数组 数组 方法 Ajax      更新时间：2023-09-26

我有以下数组

var arrayOfResults = []; // Results after like statement

我调用数据库，它会返回一个json结果，如下所示：

[{
            "id": "{fcb42c9c-3617-4048-b2a0-2600775a4c34}",
            "pid": "{34214CCB-90C3-4D75-958B-5A1D0FBDD971}",
            "ttl": "Easter Bunny",
            "img": "/~/media/Images/Recipes/Easter/Filled Pasta/LF_Baked-Spring-Vegetables-Ravioli_920.ashx?h=910'u0026w=910",
            "url": "Some url",
            "taggedwith": ["{3A54907D-4171-4F4E-8FE8-3A38DA1E874F}", "{6CD78C6B-F435-45EC-BE16-810E80311C23}", "{74528A6F-C40B-4030-A278-A4C9A2F46A47}", "{6DC82B78-61F6-45A0-A63C-EA590BB1057E}", "{E9EF1A41-51D0-403D-9373-37B7A880B251}"],
            "articleddate": "2015-05-02",
            "tname": "Recipe",
            "rbrand": ["{1F6EDA5D-4681-40F0-B455-7C343AC25B72}"]
}, {
            "id": "{2e4b04b6-334f-42e9-afd7-ddc4e08417ad}",
            "pid": "{C611BAC8-E8E0-4693-920B-93BD5EE2386B}",
            "ttl": "Latina Fettuccini 'u0026 Summer Sauce with Prawns Recipe",
            "img": "/~/media/Images/Recipes/Latina Fresh/Plain Pasta/LF_Fettuccini-Summer-Sauce-Prawns_920.ashx?h=910'u0026w=910",
            "url": "Some url",
            "taggedwith": ["{3A54907D-4171-4F4E-8FE8-3A38DA1E874F}", "{6CD78C6B-F435-45EC-BE16-810E80311C23}", "{74528A6F-C40B-4030-A278-A4C9A2F46A47}", "{6DC82B78-61F6-45A0-A63C-EA590BB1057E}", "{E9EF1A41-51D0-403D-9373-37B7A880B251}"],
            "articleddate": "2015-05-02",
            "tname": "Recipe",
            "rbrand": ["{1F6EDA5D-4681-40F0-B455-7C343AC25B72}"]
}]

在UI上，我有一个文本字段，用户可以在其中输入自由文本。

当用户输入大约5个字符时，我调用以下ajax方法，我试图实现的是，我想对上面数组中的ttl字段执行类似的语句，如果ttl字段匹配或类似于用户输入的freeText，那么我想将该项推送到数组"arrayOfResuts"中，但我看到了发现的警告消息，但它没有将该项推入新数组中，我知道这一点，因为我提醒ajax调用结束时的长度及其0；

var addItem = false;
var freeText = $('#searchKeywords').val();
$.ajax({
    url: 'search?t=&s=DateDesc&type=globalsearch&q=',
    type: 'GET',
    dataType: 'json',
    success: function (searchDataList) {
        console.log(searchDataList)

        for (var i = 0; i < searchDataList.length; i++) {
            addItem = false;
            if (freeText.length > 0) { // Filter on free text
                if (searchDataList[i].ttl.indexOf(freeText) > -1) { // if title contains free text then we need to add it to the arrayOfResults[].
                    alert('found');
                    arrayOfResults.push(searchDataList[i]) // This doesn't seem to work.
                    addItem = true;
                }
            }
        } // End of for loop
    },
    error: function (request, error) {
    }
});

alert(arrayOfResults.length);

现在我还不能100%确定到底出了什么问题，所以如果能提供任何帮助，我将不胜感激。

在AJAX请求完成之前，您的警报正在运行。

由于AJAX请求是异步的，console.log()代码在调用成功之前运行，因此您不会打印所需的结果。

要打印结果，只需在AJAX请求的成功和错误函数中打印即可。在完整的函数中这样做没有帮助，因为它与其他函数异步运行。

正如前面提到的其他答案一样，您需要处理成功块中的数据。您可以像下面这样直接执行，或者对于更复杂的情况，调用一个新函数来处理成功语句末尾的数据。

更新代码：

var freeText = $('#searchKeywords').val();
$.ajax({
    url: 'search?t=&s=DateDesc&type=globalsearch&q=',
    type: 'GET',
    dataType: 'json',
    success: function (searchDataList) {
        console.log(searchDataList);
        for (var i = 0; i < searchDataList.length; i++) {
            addItem = false;
            if (freeText.length > 0) {     
                if (searchDataList[i].ttl.indexOf(freeText) > -1) {
                    alert('found');
                    arrayOfResults.push(searchDataList[i]);
                    addItem = true; 
                }
            }
        } // End of for loop
        if (arrayOfResults.length > 1) {
           alert(arrayOfResults.length);
           console.log(arrayOfResults);
         }
    },
    error: function (request, error) {
    }
});

您的警报将始终为0，因为AJAX是异步的（AJAX中的A代表异步），并且您同步调用警报。

实际情况是，ajax请求获取数据，而synchron代码照常运行。既然ajax请求已经清楚地完成了，那么在调用警报之后，它将无法记录任何有意义的内容。

如果您希望在异步请求完成时调用某个函数，无论它是否成功，请在success:和error:之外使用done。此代码将在请求完成后运行，并向您显示实际长度。

相关文章：