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

Optimal methods for handling Ajax requests in the present day

Removing an event from Fullcalendar

Converting a json array into a map with the help of Underscore.js

The dictionary's get method is failing to properly retrieve the requested data

The PUT rest service does not function in AngularJS version 1.0.8

Unraveling the Mystery of Passing Props in React.js

Layout display issue post redirection in React

Eliminate nested object properties using an attribute in JavaScript

Retrieve content from JSON post data

How can you efficiently send JSON data from Ajax to a Servlet in a Java environment?

VueJS - When using common functions, the reference to "this" may be undefined

Does the CSV stream parser (PapaParse) cause rendering delays?

If an Angular reactive form component has a particular value

Tips for choosing specific characters from a string using JavaScript

Troubleshooting Forms Authentication problem in ASP.NET ASHX 302 error situation

Enable JavaScript in Webdriver Selenium to enhance the functionality of your web

I encountered an issue with Expo commands where it was throwing an error: "Module not found: 'minizlib'"

utilizing jQuery's each method to extract data from a form and then proceeding to transmit it as an asynchronous ajax

Flashing text compatibility across all browsers

Ways to implement collapsible functionality into table rows