javascript - 从 api 对象数组生成一个新对象

Question

我想要做的是获取从 API 返回给我的对象数组并创建一个新对象，然后将该对象添加到员工列表中。

我从 API 中获得了正确的结果，它只是从结果中创建一个新对象并将该对象附加到员工列表数组中。

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

预期结果是一个员工对象数组，但是在返回员工列表之前我得到了一个空数组。

更新我在工作时遇到了最初的问题，但是当我尝试添加或删除员工时，这会变得很困难。

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

代码需要返回 $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;
};

然后调用代码需要从 Promise 中提取数据:

var promise = this.getEmployees();

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

要记住的要点:

1. $http 服务返回一个 promise
2. .then 方法根据返回值返回一个新 promise
3. array.map 方法返回一个新数组
4. 需要从 Promise 中提取数据

<小时/>

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

$http 服务不会等待服务器发送的数据。它将函数保存在 .then block 中，并在稍后调用该函数。依赖于 $http 服务的函数永远无法返回数据。他们只能返回 promise 。

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

依赖于服务器数据的代码必须放置在 .then block 中。这样代码就会在数据从服务器到达后执行。