Вставить элемент в новый массив в методе Ajax

Question

У меня есть следующий массив

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

В пользовательском интерфейсе у меня есть текстовое поле, в которое пользователь может ввести произвольный текст.

Я вызываю следующий метод ajax, когда пользователь ввел примерно 5 символов, и я пытаюсь добиться того, чтобы я хотел выполнить оператор like в поле 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%, что на самом деле идет не так, поэтому любая помощь будет принята с благодарностью.

javascript arrays ajax

0

Code Ratchet 18 Дек 2015 в 02:33

Answer 1

Ваше оповещение запущено до того, как ваш AJAX-запрос будет выполнен.

Поскольку запрос AJAX является асинхронным, код console.log() выполняется до вызова успешного завершения, поэтому вы не печатаете нужный результат.

Чтобы напечатать результаты, просто распечатайте в функциях success и error запроса AJAX. Выполнение этой функции в полной функции не поможет, так как она запускается асинхронно от других.

1

Nachshon Schwartz 17 Дек 2015 в 23:58

Answer 2

Как уже упоминалось в других ответах, вам нужно обработать данные в блоке успеха. Вы можете сделать это напрямую, как показано ниже, или в более сложных случаях вызвать новую функцию для обработки данных в конце оператора успеха.

Код обновления:

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

Vinny M 18 Дек 2015 в 00:24

Answer 3

Ваше предупреждение всегда будет 0, потому что AJAX является асинхронным (A в AJAX означает это), и вы вызываете свое предупреждение синхронно.

Что происходит, запрос ajax получает данные, а код синхронизации работает как обычно. Теперь, когда запрос ajax выполняется четко после того, как вы вызвали свое оповещение, он не может регистрировать что-либо, что имеет смысл.

Если вы хотите, чтобы функция вызывалась после выполнения асинхронного запроса, независимо от того, был он успешным или нет, используйте done: дополнительно к success: и error:. Этот код будет запущен после выполнения запроса и покажет вам фактическую длину.

-1

Clemens Himmer 17 Дек 2015 в 23:58

Вставить элемент в новый массив в методе Ajax

3 ответа

Похожие вопросы

Новые вопросы

javascript