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

时间:2015-12-17 23:33:35

标签: javascript arrays ajax

我有以下数组

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}"]
}] 

在用户界面上,我有一个文本字段,用户可以输入自由文本。

当用户输入大约5个字符时,我调用以下ajax方法,我想要实现的是我想在上面的数组中的ttl字段上执行like语句,如果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%确定实际出现了什么问题,所以任何帮助都会受到赞赏。

3 个答案:

答案 0 :(得分:1)

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

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

要打印结果,只需在AJAX请求的成功和错误功能中打印即可。在完整的功能中执行此操作将无济于事,因为它与其他功能异步运行。

答案 1 :(得分:0)

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

更新代码:

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

答案 2 :(得分:-1)

您的警报将始终为0,因为AJAX是异步的(AJAX中的A代表该警报)并且您同步调用警报。

当发生同步代码正常运行时,ajax请求会获取数据。既然ajax请求已经在之后完成了,你就会调用你的警报,它就无法记录任何有意义的事情。

如果您希望在异步请求完成时调用函数,那么无论是否成功,请使用donesuccess:error:。此代码将在请求完成时运行并显示实际长度。