Как мне добавить массив объектов в таблицу HTML?

#javascript #html #arrays #object

#javascript #HTML #массивы #объект

Вопрос:

Я собираю строковые данные JSON при нажатии кнопки. Каждый раз, когда я нажимаю кнопку, в массив добавляется другой продукт. Массив представляет собой массив объектов:

 {SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}

Как мне взять эту информацию и вставить ее в таблицу? допустим, у меня есть

 <div id='table'>
    <table>
    </table>
</div>

JavaScript:

 var prodArr=[{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", 
product_name: "Tennis balls"}];

function buildTable(data){
    var table = document.getElementById('table');
    const arr = data;
    for(var obj of arr){
        var row = document.createElement('tr');
        for(var val of Object.values(obj)){
            var col = document.createElement('td');
            col.textContent = val;
            row.appendChild(col);
        }
        table.appendChild(row);
    }
}

buildTable(prodArr);

Я хотел бы добавить заголовки для SKU:, retail_price:, list_price: product_name: и текстовое поле для количества в каждой строке.

1. Что вы уже пробовали? Мы ожидаем, что вы проведете свое исследование и предпримете попытку перед публикацией. Кроме того, вложение таблицы в a div является избыточным. Просто отдайте столу id и проиграйте div .

2. Вы случайно не знаете о Document.createElement() методе? Как насчет Node.textContent свойства? Есть идеи?

3. @Evgengorbunkov Это document , не Document .

4. codepen.io/Postman507/pen/MWjQpKR — Это то, что у меня есть до сих пор, я хотел бы добавить заголовки для артикула: product_name: list_price: retail_price: количество: но количество здесь не указано, поэтому я бы хотел, чтобы текстовое поле было вставлено на место. Я также обновил свой исходный код, чтобы он соответствовал этому codepen.

Ответ №1:

Вы можете перебирать массив, использовать Object.values для перебора значений объекта и использовать document.createElement для создания новых строк таблицы для добавления в таблицу.

 const table = document.getElementById('table');
const arr = [{SKU: "9372983-382L", retail_price: "11.75", list_price: "3.50", product_name: "Tennis balls"}];
for(const obj of arr){
  const row = document.createElement('tr');
  for(const val of Object.values(obj)){
    const col = document.createElement('td');
    col.textContent = val;
    row.appendChild(col);
  }
  table.appendChild(row);
}

 table, tr, td, th {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 2px;
}

 <table id="table">
</table>

Развернуть фрагмент