Создание таблицы html из данных JSON

Question

У меня есть html-файл, в котором есть этот фрагмент.

<div> 
    <table id="apps"></table> 
</div> 

Я получаю данные в формате JSON, который выглядит следующим образом:

{ 
    "1": [ 
     { 
      "A": "", 
      "B": "", 
      "C": "", 
      "D": "", 
      "E": "" 
     } 
    ] 
} 

Там будет ровно один "1", но может быть больше, чем один словарь в списке "1". В этом примере у нас есть только один {} в списке, [], но может существовать несколько {}, содержащих ровно пять элементов, таких как показано выше.

Я хочу создать таблицу из этих данных, где каждая строка представляет один {} в пределах [] и имеет пять столбцов, представляющих A, B, C, D, E соответственно.

Я не уверен, что у меня должна быть структура этого, теги уже в моем html (это не в моем html-коде), а затем заполнить эти теги или должна ли моя функция загружать эти данные в мой html-файл, таблицу доступа id = "apps" и создавать эти теги, а затем заполнять эти теги? Что лучше? и как можно эффективно это сделать?

Answer 1

Попробуйте этот простой рабочий пример. Надеюсь, он будет работать в соответствии с вашими ожиданиями.

var dataObj = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     }, 
 
     { 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     } 
 
    ]}; 
 

 
var dictionaryData = dataObj["1"]; 
 

 
for (var i in dictionaryData) { 
 
    var table = document.getElementById("apps"); 
 
    var tr = document.createElement("tr"); 
 
    var td = document.createElement("td"); 
 
    
 
    for (var key in dictionaryData[i]) { 
 
    var txt = document.createTextNode(key); 
 
    td.appendChild(txt); 
 
    tr.appendChild(td); 
 
    } 
 
    table.appendChild(tr); 
 
}

table, td { 
 
    border: 1px solid black; 
 
}

<div> 
 
    <table id="apps"></table> 
 
</div>

Answer 2

Не знаю ваших требований к проекту, но я бы пропустил все эти проблемы и воспользовался библиотекой, например, DataTables. Существует множество способов заполнения таблицы от AJAX или других data sources. Даже если вы не можете возиться с источником данных таблицы, чтобы соответствовать его стандартам, существует method для переформатирования.

Answer 3

Ваш вопрос: «Что лучше: иметь теги таблицы и ячейки уже в разметке или создавать их, когда я получаю данные?»

Я бы сказал, что лучшим вариантом является сбор данных при получении объектов.

В pseduocode:

for each object in 1 
    make new row <tr></tr> 

    for each data in object 
    make new cell <td></td> 
    insert data into <td>[here]</td> 
    insert cell into <tr>[here]</tr> 

    insert filled row into "apps" by using it's ID 
done 

ли это будет достаточно для того, что вы хотели знать?

Answer 4

Проверить это демо:

var jsonResponse = { 
 
    "1": [{ 
 
      "A": "", 
 
      "B": "", 
 
      "C": "", 
 
      "D": "", 
 
      "E": "" 
 
     }, 
 
     { 
 
      "F": "", 
 
      "G": "", 
 
      "H": "", 
 
      "I": "", 
 
      "J": "" 
 
     } 
 
    ], 
 
    "2": [{ 
 
      "K": "", 
 
      "L": "", 
 
      "M": "", 
 
      "N": "", 
 
      "O": "" 
 
     }, 
 
     { 
 
      "P": "", 
 
      "Q": "", 
 
      "R": "", 
 
      "S": "", 
 
      "T": "" 
 
     } 
 
    ] 
 
}; 
 

 
$.each(jsonResponse, function(outerKey, list) { 
 
    var row = $('<tr>', { 
 
     id: 'row_' + outerKey 
 
    }); 
 
    $.each(list, function(innerKey, value) { 
 
     for (var key in value) { 
 
      var col = $('<td>', { 
 
       id: key, 
 
       text: key 
 
      }) 
 
      row.append(col); 
 
     } 
 
    }); 
 
    $('#apps').append(row); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <table id="apps"></table> 
 
</div>