Преобразование JSON в таблицу html

Что я уже делал: Я написал сценарий php, который эхо меняет структуру данных JSON. Теперь я пытаюсь написать Html-скрипт, который будет получать результаты в формате JSON, но повторю это в таблице html ниже, это мой PHP-скрипт и мой скрипт с попыткой HTM. Любые советы о том, как я могу это сделать, и я буду благодарен.Преобразование JSON в таблицу html

<html> 
<head> 
<title>Details B</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta name="robots" content="noindex, nofollow" /> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     JSONload(); 
    }) 
    function JSONload() { 
     $('#results').empty(); 
     $('<table id="table2" border="1"/>').appendTo('#results'); 
     $.get("details.php", {date1:$('#date_1').val(),date2:$('#date_2').val()}, function(result){ 
      for(elem in result[0]) 
       $('<th scope="col">'+elem+'</th>').appendTo('#table2'); 
      for(var i = 0; i <= result.length; i++) { 
       $('<tr id="'+(i)+'" />').appendTo('#table2'); 
       for(elem in result[i]) { 
        $('<td>'+result[i][elem]+'</td>').appendTo('#'+i); 
       } 
      } 
     },'json'); 
    } 
</script> 
</head> 
<body> 
<table> 
<tr> 
<td> 
    <div class="fixed"> 
    </div> 
</td> 
</tr> 
</table> 
<br /> 
<table border="1"> 
    <tr> 
     <th scope="col">Key</th> 
     <th scope="col">Value</th> 
    </tr> 
    <tr> 
    <td> <label for="date_1">Date as dd/mm/yyyy (date_1)</label></td> 
    <td> 
     <input name="date_1" type="text" class="larger" id="date_1" value="31/1/1970" size="12" /> 
    </td> 
    </tr> 
    <tr> 
      <td><label for="date_2">Date as dd/mm/yyyy (date_2)</label></td> 
    <td> 
     <input name="date_2" type="text" class="larger" id="date_2" value="31/1/1990" size="12" /> 
    </td> 
    </tr> 

    <tr> 
    <td>List name of all cyclists with their country's name, gdp and population</td> 
    <td><input type="button" onClick="JSONload()" name="submit" id="button" value="Submit" class="larger" /></td> 
    </tr> 

    <tr> 

    </tr> 
</table> 
<div id="results" /> 
</body> 
</html>

источник

2013-04-08 user2201189

Loop над данными JSON, генерировать HTML строку, а затем, когда сделано , добавьте его в свою новую таблицу. Что вы пробовали? –

$ (документ) .ready (функция() { \t \t \t JSONload(); \t \t}) \t \t функция JSONload() { \t \t \t $ ('#') Результаты пустой().; \t \t \t $ ('

'). AppendTo ('# results'); \t \t \t $ .get ("details.php", {date1: $ ('# date_1'). Val(), date2: $ ('# date_2'). Val()}, function (results) { \t \t \t \t для (эля в результате [0]) \t \t \t \t \t $ ('<й области действия = "Col">' + Эль + ') .appendTo (' # table2'); \t \t \t \t для (var i = 0; i <= result.длина; i ++) { \t \t \t \t \t $ (' 'привести + [I] [эль] +' ') .appendTo (' #' + I) ; \t \t \t \t \t} \t \t \t \t} \t \t \t}); \t \t} – user2201189

@ user2201189 Редактировать вопрос, чтобы включить этот код, пожалуйста. Комментарии действительно не предназначены для обработки всего, кроме одного строкового (или менее) фрагментов. –

ответ

Если предположить, что данные JSON возвращается в формате, как это так:

[ 
    { 
     "name": "Lance Armstrong", 
     "country": "USA", 
     "gdp": 5000000000000, 
     "population": 350000000 
    }, 
    { 
     "name": "Someone Else", 
     "country": "France", 
     "gdp": 1000000000000, 
     "population": 70000000 
    } 
]

метод ниже будет генерировать таблицу, как вы хотите:

function JSONload() { 
$.get("details.php", { 
    date1: $('#date_1').val(), 
    date2: $('#date_2').val() 
}, function (results) { 
    var $table = $('<table id="table2" border="1"/>');  

    var $headerRow = $("<tr></tr>"); 
    var keys = []; 
    var aRow = results[0]; 
    for (var key in aRow) { 
     keys.push(key); 
     $headerRow.append("<th>" + key + "</th>"); 
    } 
    $table.append($headerRow); 

    for (var i = 0; i < results.length; i++) { 
     var row = results[i]; 
     console.log(row); 
     var $rowEl = $("<tr id='" + i + "'></tr>"); 
     for (var j = 0; j < keys.length; j++) { 
      console.log(key); 
      key = keys[j]; 
      var value = row[key]; 
      $rowEl.append("<td>" + value + "</td>"); 
     } 
     $table.append($rowEl); 
    }  

$('#results2').empty().append($table);

Обратите внимание, что склеиванием HTML строки с jQuery НЕ являются лучшей практикой. Если вы ищете полноценную сетку, проверьте одно из решений, предложенное в ответе @ ADC.

Если вы собираетесь делать значительное количество генерирования JavaScript HTML, я рекомендую заглянуть в библиотеку шаблонов, такую как Handlebars или Underscore. Это позволит вам писать чистый, смысловые шаблоны, как показано ниже (взяты из рулей):

шаблон

<script id="template" type="text/template"> 
    <h1>{{title}}</h1> 
    <ul class="people_list"> 
     {{#each people}} 
      <li>{{this}}</li> 
     {{/each}} 
    </ul> 
</script>

использование

var template = Handlebars.compile($("#template").html()); 
var html = template({ 
    "title": "My People", 
    "people": [ 
     "John Jones", 
     "Mary Smith", 
     "Suzie Smart" 
    ] 
}); 
$("results").html(html);

источник

2013-04-08 16:07:44 brettjonesdev

Я предлагаю вам взглянуть на некоторые популярные плагины JQuery:

DataTables. Я использую его в нескольких проектах. Обычно я создаю обработчик, вызываемый клиентской стороной для предоставления данных в формате JSON. Плагин заботится о рендеринге, пейджинге, разрешении сортировки и фильтрации.
jqGrid. У меня нет опыта с этим, но он используется огромным сообществом.

источник

2013-04-08 15:24:58

Смежные вопросы