@andreyqin

Как вывести получаемый с сервера JSON в таблицу?

Стоит задача: вывести получаемый с сервера JSON в таблицу вида:
<table>
    <tr>
        <td>id</td>
        <td>name</td>
        <td>id</td>
        <td>name</td>
    </tr>
    <tr>
        <td>id</td>
        <td>name</td>
        <td>id</td>
        <td>name</td>
    </tr>
</table>


То есть, нужно выводить tr, в нем 2 раза 2 первых свойства, следующий tr - следующие 2 свойства и т.д.. В голову пришел возможно не самый лучше, да к тому же и не рабочий вариант. Оставлю его здесь:
var table;
for (var i = 0; i < products.length / 2; i++) {
    table += '<tr>';
    for (var j = 0; j < products.length; j++) {
        table += '<td>' + products[j]['id'] + '</td><td>' + products[j]['name'] + '</td>';
        if (j % 2 != 0) {
            break;
        }
    }
    table += '<tr>';
}


В каждый новый tr выводится всегда первые 2 свойства. Т.е. у внутреннего цикла счетчик каждый раз слетает. Пробовал делать счетчик с помощью функции - безрезультатно. Если кому не сложно - помогите решить задачу.

UPDATE:
Структура JSON:
[
    {"id": "1", "name", "Имя1"},
    {"id": "2", "name", "Имя2"},
    {"id": "3", "name", "Имя3"}
]

и т.д.
  • Вопрос задан
  • 9835 просмотров
Решения вопроса 1
smoked
@smoked
var products = [
    {"id": "1", "name": "Имя1"},
    {"id": "2", "name": "Имя2"},
    {"id": "3", "name": "Имя3"}
];
     
var html = '<table>';
var cnt  = 0;     
for(var i in products) {
    if(cnt == 0) {
        html += '<tr>';
    }
    html += '<td>'+products[i]['id']+'</td>' + '<td>'+products[i]['name']+'</td>';
    cnt++;
    if(cnt == 2) {
        cnt = 0;
        html += '</tr>';
    }
} 
if(cnt != 0) {
    html += '<td></td><td></td></tr>';
}
html +='</table>';


Этот код написанный на коленке за 5 минут, может можно и лучше.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы