Attempt to generate a function in JavaScript that mirrors an existing one

Question

Attempt to generate a function in JavaScript that mirrors an existing one

How can I create a javascript function similar to loadAllOriginal, but with the value of the variable allEmployees being a list of employee objects (ID, FirstName, LastName)? I am attempting to implement this method in combination with autocomplete from the examples provided on this page.

function loadAllOriginal() 
{
    var allEmployees = 'Alabama, Alaska, Arizona, Arkansas, California,   Colorado, Connecticut, Delaware,\
  Florida, Georgia, Hawaii, Idaho, Illinois, Indiana, Iowa, Kansas, Kentucky, Louisiana,\
  Maine, Maryland, Massachusetts, Michigan, Minnesota, Mississippi, Missouri, Montana,\
  Nebraska, Nevada, New Hampshire, New Jersey, New Mexico, New York, North Carolina,\
  North Dakota, Ohio, Oklahoma, Oregon, Pennsylvania, Rhode Island, South Carolina,\
  South Dakota, Tennessee, Texas, Utah, Vermont, Virginia, Washington, West Virginia,\
  Wisconsin, Wyoming';

    return allEmployees.split(/, +/g).map(function (employee) 
    {
        return 
        {
            value: employee.toLowerCase(),
            display: employee
        };
    });
}

function loadAll()
{
    var allEmployees = $http.post('../Admin/GetUsers/');
    ..........
}

javascript angularjs

Answer 1

Answer №1

It appears that my previous assumption about your familiarity with loading records into the allEmployees variable was incorrect. I have revised my answer to provide guidance on how to retrieve data from an asynchronous function call and effectively utilize it.

An effective approach is to employ a deferred object and return a promise from the loadAll() function. This can be accomplished using the $q service inherent in Angular. Below is a suggested implementation:

function loadAll() {
    return $q(function (resolve, reject) {
        $http.post('../Admin/GetUsers/').then(function successCallback(response) {
            resolve(response.data.map(function (employee, index) {
                return {
                    value: employee.ID,
                    display: employee.FirstName + " " + employee.LastName
                }
            }));
        }, function failureCallback(response) {
            reject("Error!");
        });
    });
}
var allEmployees = [];
loadAll().then(function success(employees) {
    allEmployees = employees;
}, function failure(message) {
    console.log(message);
    allEmployees = [];
}).then(function (){
    console.log(allEmployees);
    // Additional code utilizing the allEmployees variable should be placed here...
});

Answer 2

It appears that my previous assumption about your familiarity with loading records into the allEmployees variable was incorrect. I have revised my answer to provide guidance on how to retrieve data from an asynchronous function call and effectively utilize it.

An effective approach is to employ a deferred object and return a promise from the loadAll() function. This can be accomplished using the $q service inherent in Angular. Below is a suggested implementation:

function loadAll() {
    return $q(function (resolve, reject) {
        $http.post('../Admin/GetUsers/').then(function successCallback(response) {
            resolve(response.data.map(function (employee, index) {
                return {
                    value: employee.ID,
                    display: employee.FirstName + " " + employee.LastName
                }
            }));
        }, function failureCallback(response) {
            reject("Error!");
        });
    });
}
var allEmployees = [];
loadAll().then(function success(employees) {
    allEmployees = employees;
}, function failure(message) {
    console.log(message);
    allEmployees = [];
}).then(function (){
    console.log(allEmployees);
    // Additional code utilizing the allEmployees variable should be placed here...
});

Attempt to generate a function in JavaScript that mirrors an existing one

Answer №1

Similar questions

Issues with Jquery Cycle not functioning as expected

Angular's UI router is directing users to the incorrect URL

The onload function in jQuery is not functioning properly when the page is refreshed

The Bootstrap modal will not appear when the parent container's position is fixed

Struggling to set up server-sent events and event sources in JHipster

The draggable=true attribute in EaselJS (MovieClip) canvas does not display a ghost image

Difficulty with parsing JSON in JavaScript and retrieving values by key

TypeORM's Polymorphic Relationship fails to retrieve data from the parent entity

Utilizing a drop-down selection menu and a designated container to store chosen preferences

"JavaScript: Issue Encountered While Converting Hexadecimal to Decimal

What are the best practices for implementing optional chaining in object data while using JavaScript?

The process of embedding one script into another script is underway

Preserving scroll location in Laravel when posting updates

My Discord.js bot was running smoothly until I added a new command, and suddenly everything went haywire. Can someone assist me in figuring out what went

Issue with Vue class binding failing to update when state is modified

What is the best way to pass a websocket instance to Vue.js components and then invoke the send() method on it?

Concealing an element by using parentElement.getElementsByClassName to set the display property to none

Having trouble assigning a default value to an array in the useState declaration

What is the best way to check the status of a template file in $routeProvider.then?

Enhancing React components with Hooks and markers