0

What I'm trying to do is take the array of objects that is returned to me from the API and create a new object and then add that object to the employees list.

I am getting the correct results from the API its just creating a new object from the results and attaching that object to the employeesList array.

var employeesList = [];

this.getEmployees = function () {
    $http.get("https://randomuser.me/api/?nat=us&results=100&inc=name,location")
    .then(function(response) {
        employees = response.data.results;
        employees.map(employee => {
            return [
                employee.employeeName = employee.name.first + ' ' + employee.name.last, 
                employee.employeeStreet = employee.location.street.number + ' ' + employee.location.street.name,
                employee.employeeCity = employee.location.city,
                employee.employeeState = employee.location.state,
                employee.employeeZipCode = employee.location.postcode,
            ];
        });
    });
    return employeesList;
};

The expected results are an array of employee objects however I am getting an empty array before I even return the employeesList.

UPDATE I have the initial problem working however it makes it difficult when I am trying to add or delete an employee.

this.addEmployee = function (employee) {
    var employeesList = this.getEmployees();
    employeesList.push(employee);
    var str = JSON.stringify(employeesList);
    localStorage.setItem("Employees", str);
};

this.removeEmployee = function (employee) {
    var employeesList = this.getEmployees();
    employeesList.splice(employeesList.indexOf(employee), 1);
    var str = JSON.stringify(employeesList);
    localStorage.setItem("Employees", str);
};
Improve this question
1
  • The $http service does not wait for the data to arrive from the server. It holds the function in the .then block and invokes that function later. Functions that depend on the $http service can never return data. They can only return promises. Commented Oct 16, 2019 at 18:03

3 Answers 3

Reset to default
1

The code needs to return the $http promise:

this.getEmployees = function () {
    var url = "https://randomuser.me/api";
    var params = {
      nat: "us",
      results: 100,
      inc: "name,location"
    };
    var config = { params: params };

    var promise = $http.get(url, config)
    var newPromise = promise.then(function(response) {
        var list = response.data.results;
        var newList = list.map(employee => ({
          employeeName: employee.name.first + ' ' + employee.name.last, 
          employeeStreet: employee.location.street.number + ' ' + employee.location.street.name,
          employeeCity: employee.location.city,
          employeeState: employee.location.state,
          employeeZipCode: employee.location.postcode,
        }));
        return newList;
    });
    return newPromise;
};

Then the calling code needs to extract the data from the promise:

var promise = this.getEmployees();

promise.then(list => {
    console.log(list);
    this.employeeList = list;
});

Points to remember:

  1. The $http service returns a promise
  2. The .then method returns a new promise based on returned values
  3. The array.map method returns a new array
  4. Data needs to be extracted from promises

UPDATE I have the initial problem working however it makes it difficult when I am trying to add or delete an employee.

The $http service does not wait for the data to arrive from the server. It holds the function in the .then block and invokes that function later. Functions that depend on the $http service can never return data. They can only return promises.

this.addEmployee = employee => {
    ̶v̶a̶r̶ ̶e̶m̶p̶l̶o̶y̶e̶e̶s̶L̶i̶s̶t̶ ̶=̶ ̶t̶h̶i̶s̶.̶g̶e̶t̶E̶m̶p̶l̶o̶y̶e̶e̶s̶(̶)̶;̶
    var promise = this.getEmployees();

    promise.then(function(employeesList) {
        employeesList.push(employee);
        var str = JSON.stringify(employeesList);
        localStorage.setItem("Employees", str);
    });
};

Code that depends on data from the server must be placed in a .then block. That way the code executes after the data arrives from the server.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Is there anything I can do so that in my other methods inside my dataService I can work with the array more efficiently. I'll be adding an update to my post.
I added my further questions in my original post.
-1

The success handler of a promise does not have a return value.

This line creates a global variable called employees.

employees = response.data.results;

This line creates a new array that is not assigned to anything and falls straight to garbage collection.

employees.map(employee => { // your map function });

You map function takes each employee and creates an array so you are ending up with an array of arrays.

What you need to do is assign the correct mapping to employeesList in the success handler of the promise after it resolves.

this.getEmployees = function () {
  $http.get("https://randomuser.me/api/?nat=us&results=100&inc=name,location")
  .then(function(response) {
    employeesList = response.data.results.map(employee => ({
      employeeName: employee.name.first + ' ' + employee.name.last, 
      employee.employeeStreet: employee.location.street.number + ' ' + employee.location.street.name,
      employeeCity: employee.location.city,
      employeeState: employee.location.state,
      employeeZipCode: employee.location.postcode
    }));
  });
};
Improve this answer

Comments

-1

Following might give you expected list.

employees.map(employee => {
    employee.employeeName = employee.name.first + ' ' + employee.name.last;
    employee.employeeStreet = employee.location.street.number + ' ' + employee.location.street.name;
    employee.employeeCity = employee.location.city;
    employee.employeeState = employee.location.state;
    employee.employeeZipCode = employee.location.postcode;

    return employee;
});
Improve this answer

2 Comments

Its creating the employ object correctly but not adding it to the employeesList array.
You are mutating the original employee object, not creating a new one.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.