Как изменить вывод данных из промиса?

Question

[Максим К]

Всем привет. Есть код:

extensionButton.addEventListener('click', function() {
    // Пример данных из промиса
    var promiseData = new Promise(function(resolve, reject) {
      // Здесь можно выполнить асинхронные операции для получения данных
      // В данном примере просто создаем фиктивный массив данных
      var data = [
        { name: 'John', age: 25 },
        { name: 'Jane', age: 30 },
        { name: 'Bob', age: 35 }
      ];

      // Разрешаем промис с полученными данными
      resolve(data);
    });

    // Обработка данных из промиса
    promiseData.then(function(data) {
      // Создаем таблицу и добавляем заголовки
      var table = document.createElement('table');
      var thead = document.createElement('thead');
      var headerRow = document.createElement('tr');
      var headers = ['Имя', 'Возраст'];

      headers.forEach(function(headerText) {
        var header = document.createElement('th');
        header.textContent = headerText;
        headerRow.appendChild(header);
      });

      thead.appendChild(headerRow);
      table.appendChild(thead);

      // Добавляем строки с данными в таблицу
      var tbody = document.createElement('tbody');
      data.forEach(function(rowData) {
        var row = document.createElement('tr');
        Object.values(rowData).forEach(function(value) {
          var cell = document.createElement('td');
          cell.textContent = value;
          row.appendChild(cell);
        });
        tbody.appendChild(row);
      });

      table.appendChild(tbody);
    });
  });
});

Хочу вывести только имена (name) из массива data, но не очень получается. Что я делал:

value.name, data.forEach(function(rowData.name) и прочие конструкции, но в лоб не работает. Что необходимо поправить??? СПАСИБО

Сделал так:

var tbody = document.createElement('tbody');
      data.forEach(function(rowData) {
        var row = document.createElement('tr');
        var cell = document.createElement('td');
        cell.textContent = data[1].name;
        row.appendChild(cell);
        tbody.appendChild(row);
      });

Но это для 1-го элемента.

Answer 1

[Алексей Ярков]

Я ничего не понял из вопроса. Вот вам 2 варианта.

const data = [
  { name: 'John', age: 25 },
  { name: 'Jane', age: 30 },
  { name: 'Bob', age: 35 }
];
const objectsWithName = data.map(({ name }) => ({ name }));
console.log(objectsWithName);
// [
//   { name: 'John' },
//   { name: 'Jane' },
//   { name: 'Bob' }
// ]
const nameStrings = data.map(({ name }) => name);
console.log(nameStrings);
// ['John', 'Jane', 'Bob']

Answer 2

[Vindicar]

data.forEach(function(rowData.name)
Намекает, что стоит подучить язык, это вообще некорректный синтаксис.
Начало у тебя правильное:
data.forEach(function(rowData) { ... }
в rowData будут попадать элементы массив data, т.е. { name: 'John', age: 25 }
Тогда в теле (в теле! не в заголовке!) своей анонимной функции можешь обращаться к rowData.name.
Скажем,

data.forEach(function(rowData) { console.log(rowData.name); } );

А вообще я бы не использовал forEach(), а использовал бы простой цикл for.

for (let i = 0; i < data.length; i++)
{
    console.log(data[i].name);
}

Comments

[Максим К]

Так и сделал

// Добавляем строки с данными в таблицу
      var tbody = document.createElement('tbody');
      data.forEach(function(rowData) {
        var row = document.createElement('tr');
        var cell = document.createElement('td');
        cell.textContent = rowData.name;
        row.appendChild(cell);
        tbody.appendChild(row);
      });

[Rsa97]

Можно ещё использовать деструктурирование:

data.forEach(function({ name }) {
  ...
  cell.textContent = name;
  ...
}