Retrieve the AJAX response, concatenate the data, and construct a dynamic table

Question

Retrieve the AJAX response, concatenate the data, and construct a dynamic table

I am facing an issue with assigning my AJAX return as a variable to concatenate.

Here is the sample code:

         function FetchSex() {
            $.ajax({
                url: '/SEX/GetAllSex/',
                success: function (responseData) {
                    console.log(responseData);
                }
            });
         }

         function FetchUsers() {
             var Pistas = null;
             $.ajax({
                 url: '/Users/GetAllUsers/',
                 success: function (dataReceived) {
                     console.log(dataReceived)

                 }
             });
         }

The objective is to concatenate the results. Here are the steps I am following:

var SexInfo = GetSex();
var UsersInfo = GetUsers();

var combinedData = UsersInfo.concat(SexInfo);

An error message shows up saying that both SexInfo and UsersInfo variables are undefined!

I find this confusing.

Your help would be greatly appreciated! =)

javascript arrays asp.net-mvc-4

Answer 1

Answer №1

Utilize GetSex and GetUsers as asynchronous requests. Make sure to chain your requests and assign variable values within the callback functions.

function GetSex(successCallback) {
    $ajax({
        url: '/SEX/GetAllSex/',
        success: successCallback
    });
}

function GetUsers(successCallback) {
    $.ajax({
        url: '/Users/GetAllUsers/',
        success: successCallback
    });
}

function combineUsers(successCallback) {
    GetSex(function(Sex) {
        GetUsers(function(Users) {
            successCallback(Users.concat(Sex));
        }}
    });
}


var x;

combineUsers(function(data) {
    x = data;
});

Exercise caution to avoid falling into Callback Hell

Answer 2

Utilize GetSex and GetUsers as asynchronous requests. Make sure to chain your requests and assign variable values within the callback functions.

function GetSex(successCallback) {
    $ajax({
        url: '/SEX/GetAllSex/',
        success: successCallback
    });
}

function GetUsers(successCallback) {
    $.ajax({
        url: '/Users/GetAllUsers/',
        success: successCallback
    });
}

function combineUsers(successCallback) {
    GetSex(function(Sex) {
        GetUsers(function(Users) {
            successCallback(Users.concat(Sex));
        }}
    });
}


var x;

combineUsers(function(data) {
    x = data;
});

Exercise caution to avoid falling into Callback Hell

Answer 3

Answer №2

Oh,

I realized I forgot to declare the variables beforehand:

The final version of the code looked like this:

let Gender;
let People;

function FetchGender() {
        $.ajax({
            url: '/GENDER/FetchAllGender/',
            success: function (data) {
                Gender = data;
                console.log(data);
            }
        });
     }

     function FetchPeople() {
         let Info = null;
         $.ajax({
             url: '/People/FetchAllPeople/',
             success: function (data) {
                 People = data;
                 console.log(data)

             }
         });
     }

I appreciate your help regardless.

Answer 4

Oh,

I realized I forgot to declare the variables beforehand:

The final version of the code looked like this:

let Gender;
let People;

function FetchGender() {
        $.ajax({
            url: '/GENDER/FetchAllGender/',
            success: function (data) {
                Gender = data;
                console.log(data);
            }
        });
     }

     function FetchPeople() {
         let Info = null;
         $.ajax({
             url: '/People/FetchAllPeople/',
             success: function (data) {
                 People = data;
                 console.log(data)

             }
         });
     }

I appreciate your help regardless.

Retrieve the AJAX response, concatenate the data, and construct a dynamic table

Answer №1

Answer №2

Similar questions

What are the steps to retrieve JSON data and display it using an unordered list in an HTML document?

Prevent side menu from automatically hiding when clicking on the heading

How can I navigate through a webpage using Selenium WebDriver and JavaScript?

Iterating over an array and displaying elements on the webpage

What could be causing the issue with my hour parameter in node-cron?

Scrolling horizontally in vue-chartjs-chartwidget

Issue encountered while trying to gather vertex coordinates from a file using Blender's from_pydata function

When using the * selector in jQuery on Chrome, it targets and selects scrollbars

Holding onto numerous AJAX requests while disconnected, then dispatching them once the network connection is

Learn how to generate a DataTable in C# by parsing multiple nested JSON Objects efficiently

Error message in Leaflet JS: Unable to access property 'addLayer' because it is undefined when trying to display drawnItems on the Map

What is the best way to deliver flash messages using Express 4.0?

Is it possible for the ".filter" function to verify if the target contains multiple attributes?

Create a script that ensures my website can be set as the homepage on any internet browser

Can you set up a mechanism to receive notifications for changes in an array variable in Angular?

Struggling to get the AJAX code functioning correctly

Is there a way to prevent my token from being exposed when making an AJAX call?

Eliminate the registration message from TinyMCE by importing a package

Is it possible to hide a fixed header on scroll in a mobile device?

Ways to reuse test cases across different test suites in Protractor