从 api 对象数组生成新的 object

Question

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

Answer 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

Answer 2

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

Answer 3

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