получение значений карты, сделанной в выборке

Question

Я создаю функцию, которая извлекает массив пользователей, которые являются объектами, с сервера, после того как обещания разрешены, я делаю еще одну выборку для доступа к транспортным данным каждого пользователя, которые также являются объектами.Когда у меня есть все данные, я должен собрать данные каждого объекта через карту, и, наконец, цель состоит в том, чтобы создать таблицу, в которой отображаются пользовательские данные и транспортные данные, соответствующие каждому пользователю.Проблема в том, что, когда я пытаюсь получить доступ к атрибутам, которые я добавил к объектам, они оказываются неопределенными в таблице, тогда как, если я смотрю на консоль, массив с объектами имеет все атрибуты правильно.Может ли кто-нибудь объяснить мне, что происходит?

Здесь я оставляю код функции, из которой производятся выборки:

function users() {
    var arrayPromises;
    fetch('http://.users.php').then(response => response.json()).then(function (users) {
        for (let i = 0; i < users.length; i++) {
            fetch('http://transport.php', {
                method: 'post',
                body: "idtransport=" + users[i].transport,
                headers: {"Content-Type": "application/x-www-form-urlencoded"}
            })
                .then(function (promise) {
                    return promise.json()i
                }).then(function (promiseTransport) {
                arrayPromises += users.map(function () {
                    return users[i].idTransport = promisesTransport.id, users[i].nameTransport = promisesTransport.name, users[i].url = promisesTransport.url;
                });
            });
        }
        allTable(users);
        console.log(users)
    })
}

А здесь я оставляю функцию, которая показывает таблицу на экране:

function allTable(users) {
    var body = document.getElementsByTagName("body")[0];
    var tbl = document.createElement("table");
    var tblBody = document.createElement("tbody");
    for (var i = 0; i < users.length + 1; i++) {
        var row = document.createElement("tr");
        for (var j = 0; j < 6; j++) {
            var cell = document.createElement("td");
            if (i === 0 && j === 0) {
                var textCell = document.createTextNode("User");
                cell.appendChild(textCell);
            } else if ( i === 0 && j === 1){
                var textCell = document.createTextNode("Surname");
                cell.appendChild(textCell);
            } else if ( i === 0 && j === 2){
                var textCell = document.createTextNode("Second Surname");
                cell.appendChild(textCell);
            } else if ( i === 0 && j === 3){
                var textCell = document.createTextNode("Age");
                cell.appendChild(textCell);
            } else if ( i === 0 && j === 4){
                var textCell = document.createTextNode("Transport");
                cell.appendChild(textCell);
            } else if ( i === 0 && j === 5){
                var textCell = document.createTextNode("Image");
                cell.appendChild(textCell);
            } else if (i > 0 && j === 0) {
                var textCell = document.createTextNode(users[i-1].name);
                cell.appendChild(textCell);
            } else if (i > 0 && j === 1) {
                var textCell = document.createTextNode(users[i-1].surname);
                cell.appendChild(textCell);
            } else if (i > 0 && j === 2) {
                var textCell = document.createTextNode(users[i-1].surname2);
                cell.appendChild(textCell);
            } else if (i > 0 && j === 3) {
                var textCell = document.createTextNode(users[i-1].age);
                celda.appendChild(textoCelda);
            } else if (i > 0 && j === 4) {
                var textCell = document.createTextNode(users[i-1].nameTransport);
                cell.appendChild(textCell);
            } else if (i > 0 && j === 5) {
                var textCell = document.createElement("img");
                textCell.src = users[i-1].url;
                cell.appendChild(textCell);
            }
            row.appendChild(cell);
        }
        tblBody.appendChild(row);
    }
    tabla.appendChild(tblBody);
    body.appendChild(tabla);
    tabla.setAttribute("border", "2");
}

Здесь я оставляю изображение таблицы и console.log, чтобы вы могли видеть, что в консоли каждый из объектов в массиве имеет добавленные атрибуты, но эффективно при показеих на экране они выглядят как неопределенные (я перевел названия переменных и атрибутов в коде, но на изображении они все еще выходят на языке оригинала).

Answer 1

Promise.all (массив) возвращает одно Обещание, которое разрешается, когда все обещания в массиве разрешаются.

Когда мы создаем несколько запросов на выборку для "transport.php",мы помещаем цепочку обещаний в массив promises.Мы ожидаем разрешения Promise.all(promises), затем вызываем `allTable (users)

. Вероятно, console.log(users) указывает на реальную ссылку на данные, поэтому при просмотре обещания уже разрешены, нокогда allTable(users) вызывается, обещания еще не выполнены.

function users() {
  // var arrayPromises;
  var promises = [];

  fetch('http://.users.php').then(response => response.json()).then(function(users) {
    for (let i = 0; i < users.length; i++) {
      promises.push(fetch('http://transport.php', {
          method: 'post',
          body: "idtransport=" + users[i].transport,
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(promise) {
          return promise.json()
        })
        .then(function(promiseTransport) {
          // arrayPromises += users.map(function() {
          //   return users[i].idTransport = promisesTransport.id, users[i].nameTransport = promisesTransport.name, users[i].url = promisesTransport.url;
          // });
          // this is equivalent to the above, except it does not have an unecesary map.
          users[i].idTransport = promisesTransport.id;
          users[i].nameTransport = promisesTransport.name;
          users[i].url = promisesTransport.url;
        })
      );
    }
    Promise.all(promises).then(function() {
      allTable(users);
      console.log(users);
    })
  })
}