Блог

У меня есть массив, который выглядит следующим образом (полный список здесь):

 var verbMap = [
    {
        infinitive: "gehen",
        thirdPres: "geht",
        thirdPast: "ging",
        aux: "ist",
        pastPart: "gegangen",
        english: "go"
    },
    {
        infinitive: "gelingen",
        thirdPres: "gelingt",
        thirdPast: "gelang",
        aux: "ist",
        pastPart: "gelungen",
        english: "succeed"
    }
];
  

Я пытаюсь просмотреть каждую часть и распечатать ее в таблице. Я могу получить доступ к одному из значений, если я специально его настрою, но мне нужно иметь возможность печатать все значения в <td> s . Каждая часть массива будет представлять собой a <tr> со значениями внутри в качестве <td> тегов.

Каков наилучший способ сделать это, и есть ли лучший способ настроить данные и взаимодействовать с ними?

Создать таблицу с использованием вложенных циклов for не должно быть слишком сложно (в примере для построения элементов используется jQuery…но вам, очевидно, не нужно):

Редактировать

Удален jQuery, поскольку он, казалось, беспокоил всех (хотя управляющие структуры были важной частью примера):

 var table = document.createElement('table');

for(v in verbMap){
    var tr = document.createElement('tr');
    for(p in verbMap[v]){
         var td = document.createElement('td');
         var text = document.createTextNode(verbMap[v][p]);
         td.appendChild(text);
         tr.appendChild(td);
    }

    table.appendChild(tr);
}
  

Попробуйте выполнить следующее

 for (var i = 0; i < verbMath.length; i  ) {
  var row = document.createElement('tr'); 
  var item = verbMath[i];
  for (var prop in item) {
    if (item.hasOwnProperty(prop)) {
      var data = document.createElement('td');
      data.innerText = item[prop];
      row.appendChild(data);
    }
  }

  // Need to append the row here to the appropriate place in your DOM
}
  

Firefox не поддерживает innerText , поэтому лучше создать текстовый узел и добавить его к дочернему элементу. Также может быть лучше определить массив, чтобы гарантировать порядок столбцов и легко изменять его при необходимости.

 var table = document.getElementById("tbl"), i, j, tr, td, text;

var order = ["infinitive", "thirdPres", "thirdPast", "aux", "pastPart", "english"]

for(i=0; i<verbMap.length; i  ){
    tr = document.createElement('tr');
    for(j = 0; j<order.length; j  ){
         td = document.createElement('td');
         text = document.createTextNode(verbMap[i][order[j]]);
         td.appendChild(text);
         tr.appendChild(td);
    }
    table.appendChild(tr);
}
  

JSFiddle

Есть несколько очень хороших инструментов для создания таблиц из таких структур данных. Рассмотрите возможность использования jQuery и подключаемого модуля Datatables.

Вот несколько ссылок:

jQuery: http://jquery.com /

Таблицы данных: http://datatables.net /