Напишите этот HTML из этого результата JSON (разбор JSON)

0

У меня есть результат JSON:

{
    "html_content": [
        [
            [
                "Navegantes",
                "11",
                "8",
                "3",
                "0"
            ]
        ],
        [
            [
                "Tigres",
                "11",
                "8",
                "3",
                "0"
            ]
        ],
        [
            [
                "Caribes",
                "11",
                "6",
                "5",
                "2"
            ]
        ],
        [
            [
                "Leones",
                "11",
                "6",
                "5",
                "2"
            ]
        ],
        [
            [
                "Aguilas",
                "11",
                "5",
                "6",
                "3"
            ]
        ],
        [
            [
                "Tiburones",
                "10",
                "4",
                "6",
                "3.5"
            ]
        ],
        [
            [
                "Cardenales",
                "10",
                "3",
                "7",
                "4.5"
            ]
        ],
        [
            [
                "Bravos",
                "11",
                "3",
                "8",
                "5"
            ]
        ]
    ]
}

И мне нужно построить, для каждой такой разметки HTML, как этот:

<tr>
    <td>Navegantes</td>
    <td>11</td>
    <td>8</td>
    <td>3</td>
    <td>0</td>
    <td>
        <span class="glyphicon glyphicon-play"></span>
        <span class="glyphicon glyphicon-stop"></span>
    </td>
</tr>
<tr>
    <td>Tigres</td>
    <td>11</td>
    <td>8</td>
    <td>3</td>
    <td>0</td>
    <td>
        <span class="glyphicon glyphicon-play"></span>
        <span class="glyphicon glyphicon-stop"></span>
    </td>
</tr>

И так далее, я сделал этот код:

$.each(data.html_content, function(i, v) {
    htm += "here goes the HTML code";
});

Но это не работает, я думаю, из-за массива, может ли любая помощь?

  • 0
    вам нужно сериализовать JSON для объекта и использовать объект для создания HTML
  • 0
    хорошее время, чтобы посмотреть на нокауты или ангуляры.
Показать ещё 1 комментарий
Теги:

4 ответа

1
Лучший ответ

Что-то вроде этого:

for (var i = 0; i < data.html_content.length; i++) {
   var tr = "<tr>";
   var td = "";
   for (var j = 0; j < data.html_content[i][0].length; j++) {
       td += "<td>" + data.html_content[i][0][j] + "</td>"; 
   }
   tr += td + "<td><span></span><span></span></td></tr>";
   $("table").append(tr);
}
Поделиться
  • 0
    Наконец я получил ваше, но у вас есть ошибка, так как var tr = "<tr>"; следует инициализировать вне первого for цикла , но остальное работает отлично
1

Вы можете попробовать что-то вроде этого ( ПРИМЕР.)

var table = $('<table/>')
$.each(data.html_content, function(k, v){
    var tr = $('<tr/>');
    $.each(v[0], function(i, j){
        $('<td/>', { 'text':j }).appendTo(tr);
    });
    var sp1 = $('<span/>', { 'class':'glyphicon glyphicon-play', 'text':'Play' });
    var sp2 = $('<span/>', { 'class':'glyphicon glyphicon-stop', 'text':'Stop' });
    var tdSpan = $('<td/>');
    tdSpan.append(sp1).append(sp2);
    tr.append(tdSpan);
    table.append(tr);
});
$('body').append(table);
Поделиться
  • 0
    Это решение работает, но мне нужно удалить теги <table> так как мне нужны только теги <tr> , какой код я должен удалить, чтобы получить только их?
0

Вот базовое решение fron scratch:

$.each(data.html_content, function(i, v) {
    htm += '<tr>' +
        '    <td>' + i[0][0] + '</td>' +
        '    <td>' + i[0][1] + '</td>' +
        '    <td>' + i[0][2] + '</td>' +
        '    <td>' + i[0][3] + '</td>' +
        '    <td>' + i[0][4] + '</td>' +
        '    <td>' +
        '        <span class="glyphicon glyphicon-play"></span>' +
        '        <span class="glyphicon glyphicon-stop"></span>' +
        '    </td>' +
        '</tr>';
});
Поделиться
0

Вы можете написать это с нуля, но есть много доступных шаблонов JS, которые могут использовать JSON.

См. Http://coding.smashingmagazine.com/2012/12/05/client-side-templating/ о том, как они работают.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню