Add the item to a fresh array using the Ajax function

Question

Add the item to a fresh array using the Ajax function

Here is an array that I have:

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

After making a database call, I receive a JSON result like this:

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

The UI contains a text field where users can enter free text.

An ajax method is called when the user types roughly 5 characters. The goal is to search for matches in the 'ttl' field of the above array based on the user input. If a match is found, the item should be added to the 'arrayOfResults'. However, despite seeing the alert message indicating a match, the item is not pushed into the new array. This is evident because the length of the array remains 0 when alerted at the end of the ajax call.

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

I'm unsure what's causing the issue, so any assistance would be greatly appreciated.

javascript arrays ajax

Answer 1

Answer №1

Your alert is triggering before your AJAX call finishes processing.

Because the AJAX request operates asynchronously, the console.log() statement executes before the success function is invoked, resulting in the incorrect output being displayed.

To properly display the results, ensure that you print within the success and error handlers of the AJAX request. Printing within the complete handler will not solve the issue as it runs separately from the rest of the functions due to its asynchronous nature.

Answer 2

Your alert is triggering before your AJAX call finishes processing.

Because the AJAX request operates asynchronously, the console.log() statement executes before the success function is invoked, resulting in the incorrect output being displayed.

To properly display the results, ensure that you print within the success and error handlers of the AJAX request. Printing within the complete handler will not solve the issue as it runs separately from the rest of the functions due to its asynchronous nature.

Answer 3

Answer №2

It has been pointed out in previous responses that you should handle the data within the success block. You can achieve this directly as shown below, or for more intricate scenarios, call a separate function to manage the data at the conclusion of the success statement.

Revised code:

var userInput = $('#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 (userInput.length > 0) {     
                if (searchDataList[i].ttl.indexOf(userInput) > -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) {
    }
});

Answer 4

It has been pointed out in previous responses that you should handle the data within the success block. You can achieve this directly as shown below, or for more intricate scenarios, call a separate function to manage the data at the conclusion of the success statement.

Revised code:

var userInput = $('#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 (userInput.length > 0) {     
                if (searchDataList[i].ttl.indexOf(userInput) > -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) {
    }
});

Answer 5

Answer №3

Your alert will always return 0 because AJAX operates asynchronously (the A in AJAX represents this) while you are calling your alert synchronously.

What is happening is that the AJAX request is fetching the data simultaneously as the synchronous code continues to execute. Since the AJAX request finishes after you trigger your alert, it cannot output any meaningful information.

If you wish for a function to be executed once the asynchronous request completes, regardless of its success or failure, utilize the done method in addition to success: and error:. This code block will execute when the request is finished, providing you with the accurate length.

Answer 6

Your alert will always return 0 because AJAX operates asynchronously (the A in AJAX represents this) while you are calling your alert synchronously.

What is happening is that the AJAX request is fetching the data simultaneously as the synchronous code continues to execute. Since the AJAX request finishes after you trigger your alert, it cannot output any meaningful information.

If you wish for a function to be executed once the asynchronous request completes, regardless of its success or failure, utilize the done method in addition to success: and error:. This code block will execute when the request is finished, providing you with the accurate length.

Add the item to a fresh array using the Ajax function

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to send data back to a separate JavaScript file in ExtJS when working with records in a

Rearrange elements within a div by clicking a button

Using Jquery to insert content into HTML using the .html() method is not possible

Tips for altering the appearance of a button:

Any ideas on how to resolve this ajaxToolkit issue?

What is the best way to use PHP to send an GCM downstream message via HTTP POST request?

JQuery hover effect for dynamically added elements

Sending a concealed input according to the chosen option

Customizing date colors in JavaScript: A step-by-step guide

What is the method for attaching multiple listeners to an element?

Angular developers are struggling to find a suitable alternative for the deprecated "enter" function in the drag and drop CDK with versions 10 and above

Unable to maintain sequential IDs for textboxes using Javascript or JQuery

What is the best way to access form data in React using a React.FormEvent<HTMLFormElement>?

Making an Angular 6 HTTP GET call using HTTP-Basic authentication

Tips for providing support to a website without an internet connection

Encountered an issue while attempting to include multiple JavaScript sources. Please review your configuration settings for the javascripts.join

Tic-Tac-Toe: The square's value stays unchangeable

Troubleshooting: Issues with updating a text field in Vue test utils using Jest

What is the most efficient way to send an email with all fields from a massive PHP-enabled web form containing approximately 75 fields?

A blank screen of errors pops up when attempting to update through a form