Как перебрать массив JSON, используя цикл for в javascript, и сделать с его помощью строку таблицы

У меня есть этот образец массива JSON, и я не знаю, как перебирать их и использовать при создании строки таблицы.

Образец кода:


var data = [
   {foo1:"a",foo2:"b",foo3:"c"},
   {foo1:"d",foo2:"e",foo3:"f"},
   {foo1:"g",foo2:"h",foo3:"i"}
]

Я использовал этот метод:

 $.each(data, function (key, value) {
        rows += "<tr id = " + key + "><td>" + value.foo1+ "</td><td>" + value.foo2+ "</td><td>" + value.foo3+    "</td><td>"</tr>";
        });

// Но я хочу сделать его более гибким, чтобы я мог повторно использовать его для создания других строк из другого массива JSON, как в этом сценарии:

var dataNew = [
   {lorem1:"j",lorem2:"k",lorem3:"l"},
   {lorem1:"m",lorem2:"n",lorem3:"o"},
   {lorem1:"p",lorem2:"q",lorem3:"r"},
   {lorem1:"x",lorem2:"s",lorem3:"t"},
   {lorem1:"w",lorem2:"y",lorem3:"z"}
]

//Теперь я не могу использовать метод выше

К вашему сведению: у вас нет JSON. См. Объект Javascript против JSON и Что такое JSON

— 15.11.2022 10:16

javascript jquery

15.11.2022 08:52

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Мы можем использовать Object.entries() для динамического получения ключа и значения.

var data = [
   {foo1:"a",foo2:"b",foo3:"c"},
   {foo1:"d",foo2:"e",foo3:"f"},
   {foo1:"g",foo2:"h",foo3:"i"}
]

var dataNew = [
   {lorem1:"j",lorem2:"k",lorem3:"l"},
   {lorem1:"m",lorem2:"n",lorem3:"o"},
   {lorem1:"p",lorem2:"q",lorem3:"r"},
   {lorem1:"x",lorem2:"s",lorem3:"t"},
   {lorem1:"w",lorem2:"y",lorem3:"z"}
]

const parseData = (data,table) => {
  let rows = "";
  data.forEach(d1 =>{
    rows += "<tr>"
    Object.entries(d1).forEach(d2 => {
     rows += "<td id='" + d2[0] + "'>" + d2[1] + "</td>" 
    })
    rows + = "</tr>"
  })

  table.innerHTML = rows
}

parseData(data,document.querySelector("#table1"))
parseData(dataNew,document.querySelector("#table2"))

<table border = "1" id = "table1">
<table>
<br/>
<table border = "1" id = "table2">
<table>

15.11.2022 08:59

Ответ принят как подходящий

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

Функциональная правильность

Сначала необходимо собрать ключи, поскольку JavaScript не гарантирует порядок свойств внутри объекта. Если вы знаете, что каждый объект в массиве имеет одинаковые свойства, вы можете собирать ключи только из первого объекта, вместо того, чтобы перебирать все элементы.

Безопасность

Также обратите внимание, что создание элементов DOM путем объединения строк небезопасно, поскольку этот подход уязвим для внедрения кода. Присвоение значений свойству .textContent элементов DOM очищает содержимое.

var dataNew = [
   {lorem1:"j",lorem2:"k",lorem3:"l"},
   {lorem3:"o",lorem1:"m",lorem2:"n"},
   {lorem2:"q",lorem1:"p",lorem3:"r"},
   {lorem1:"x",lorem2:"s",lorem3:"t"},
   {lorem1:"w",lorem3:"z",lorem2:"y"}
]

function renderTable(table, data) {

  // Collect unique keys
  var keys = Array.from(
    data.reduce((acc, cur) => {
      Object.keys(cur).forEach(key => acc.add(key));
      return acc;
    }, new Set())
  );
  
  // Columns
  var columns = document.createElement('tr');
  keys.forEach(key => {
    var th = document.createElement('th');
    th.textContent = key;
    columns.appendChild(th);
  });
  table.appendChild(columns);

  // Rows
  data.forEach((row, idx) => {
    var tr = document.createElement('tr');
    tr.setAttribute('id', 'row-'+idx);
    keys.forEach(key => {
      var td = document.createElement('td');
      // using text content is more secure, since it
      // sanitizes the value and prevents code injections
      td.textContent = row[key];
      tr.appendChild(td);
    });
    table.appendChild(tr);
  });
}

var table = document.getElementById('table');
renderTable(table, dataNew);