Разбор объектов JSON для таблицы HTML

Question

Я пытаюсь отобразить таблицу «leaderboard» на основе данных JSON.

Я много читал о формате JSON и преодолел некоторые первоначальные препятствия, но мои знания Javascript очень ограничены, и мне нужна помощь!

В основном мои данные JSON проступает вида:

[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}] 

Что мне нужно, чтобы иметь возможность перебрать этот массив, генерируя строку таблицы или элемент списка для каждого объекта. В массиве будет неизвестное количество объектов, но каждый будет иметь одинаковый формат - три значения: имя, счет, команда.

До сих пор я использовал следующий код, который подтверждает, что я успешно загрузки объектов в Console-

$.getJSON(url, 
function(data){ 
    console.log(data); 
}); 

, но я не уверен, как перебрать их, разбор их в HTML-таблицы ,

Следующий шаг сортировки записей по счету в порядке убывания ...

Любая помощь будет оценена. Спасибо!

EDIT:

Обновленный код ниже, это работает:

$.getJSON(url, 
function (data) { 
    var tr; 
    for (var i = 0; i < data.length; i++) { 
     tr = $('<tr/>'); 
     tr.append("<td>" + data[i].User_Name + "</td>"); 
     tr.append("<td>" + data[i].score + "</td>"); 
     tr.append("<td>" + data[i].team + "</td>"); 
     $('table').append(tr); 
    } 
}); 

(в $ .parseJSON не было необходимости, мы можем использовать данные '' как массив JSON уже разобран, я считаю)

Answer 1

Петля над каждым объектом, добавляя строку таблицы с соответствующими данными на каждую итерацию.

$(document).ready(function() { 
    $.getJSON(url, 
    function (json) { 
     var tr; 
     for (var i = 0; i < json.length; i++) { 
      tr = $('<tr/>'); 
      tr.append("<td>" + json[i].User_Name + "</td>"); 
      tr.append("<td>" + json[i].score + "</td>"); 
      tr.append("<td>" + json[i].team + "</td>"); 
      $('table').append(tr); 
     } 
    }); 
}); 

JSFiddle

Answer 2

Это сообщение очень полезно для всех вас

Первый Разбираем JSON данных с помощью JQuery Eval синтаксического анализа, а затем iterarate через JQuery каждая функция, приведенная ниже код sniplet:

   var obj = eval("(" + data.d + ")"); 

       alert(obj); 
       $.each(obj, function (index,Object) { 

        var Id = Object.Id; 
        var AptYear = Object.AptYear; 
        $("#ddlyear").append('<option value=' + Id + '>' + AptYear + '</option>').toString(); 
       }); 

Answer 3

Вы можете использовать простой JQuery плагин jPut

http://plugins.jquery.com/jput/

<script> 
$(document).ready(function(){ 

var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}]; 
//while running this code the template will be appended in your div with json data 
$("#tbody").jPut({ 
    jsonData:json, 
    //ajax_url:"youfile.json", if you want to call from a json file 
    name:"tbody_template", 
}); 

}); 
</script> 

<div jput="tbody_template"> 
<tr> 
    <td>{{name}}</td> 
    <td>{{score}}</td> 
</tr> 
</div> 

<table> 
<tbody id="tbody"> 
</tbody> 
</table> 

Answer 4

Сделать HTML таблицу из массива JSON объектов, расширив $, как показано ниже

$.makeTable = function (mydata) { 
      var table = $('<table border=1>'); 
      var tblHeader = "<tr>"; 
      for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>"; 
      tblHeader += "</tr>"; 
      $(tblHeader).appendTo(table); 
      $.each(mydata, function (index, value) { 
       var TableRow = "<tr>"; 
       $.each(value, function (key, val) { 
        TableRow += "<td>" + val + "</td>"; 
       }); 
       TableRow += "</tr>"; 
       $(table).append(TableRow); 
      }); 
      return ($(table)); 
     }; 

и использовать следующим образом:

var mydata = eval(jdata); 
var table = $.makeTable(mydata); 
$(table).appendTo("#TableCont"); 

где TableCont некоторые DIV

Answer 5

Вы можете использовать KnockoutJS с jQuery. У KnockoutJS есть умные функции привязки данных.С помощью функции foreach binding вы можете написать код, как в этом примере:

HTML:

<table> 
    <thead> 
     <tr> 
      <th>User Name</th> 
      <th>Score</th> 
      <th>Team</th> 
     </tr> 
    </thead> 
    <tbody data-bind="foreach: teams"> 
     <tr> 
      <td data-bind="text: User_Name"></td> 
      <td data-bind="text: score "></td> 
      <td data-bind="text: team "></td> 
     </tr> 
    </tbody> 
</table> 

JavaScript:

$(document).ready(function() { 
     $.getJSON(url,function (json) { 
       ko.applyBindings({ 
        teams: json 
       }); 
      } 
     }); 

    }); 

Fiddle Demo с вашими фиктивными данными

Answer 6

Loop над каждым объектом, вставить массив строк и Присоединяйся к ним. Добавляйте в целевую таблицу, это лучше.

$(document).ready(function() { 
$.getJSON(url, 
function (json) { 
    var tr=[]; 
    for (var i = 0; i < json.length; i++) { 
     tr.push('<tr>'); 
     tr.push("<td>" + json[i].User_Name + "</td>"); 
     tr.push("<td>" + json[i].score + "</td>"); 
     tr.push("<td>" + json[i].team + "</td>"); 
     tr.push('</tr>'); 
    } 
    $('table').append($(tr.join(''))); 
}); 

Answer 7

другой хороший рекурсивный способ создания HTML из вложенного объекта JSON (в настоящее время не поддерживающие массивы):

// generate HTML code for an object 
var make_table = function(json, css_class='tbl_calss', tabs=1){ 
    // helper to tabulate the HTML tags. will return '\t\t\t' for num_of_tabs=3 
    var tab = function(num_of_tabs){ 
     var s = ''; 
     for (var i=0; i<num_of_tabs; i++){ 
      s += '\t'; 
     } 
     //console.log('tabbing done. tabs=' + tabs) 
     return s; 
    } 
    // recursive function that returns a fixed block of <td>......</td>. 
    var generate_td = function(json){ 
     if (!(typeof(json) == 'object')){ 
      // for primitive data - direct wrap in <td>...</td> 
      return tab(tabs) + '<td>'+json+'</td>\n'; 
     }else{ 
      // recursive call for objects to open a new sub-table inside the <td>...</td> 
      // (object[key] may be also an object) 
      var s = tab(++tabs)+'<td>\n'; 
      s +=  tab(++tabs)+'<table class="'+css_class+'">\n'; 
      for (var k in json){ 
       s +=  tab(++tabs)+'<tr>\n'; 
       s +=   tab(++tabs)+'<td>' + k + '</td>\n'; 
       s +=      generate_td(json[k]); 
       s +=  tab(--tabs)+'</tr>' + tab(--tabs) + '\n'; 


      } 
      // close the <td>...</td> external block 
      s +=  tab(tabs--)+'</table>\n'; 
      s += tab(tabs--)+'</td>\n'; 
      return s; 
     } 
    } 
    // construct the complete HTML code 
    var html_code = '' ; 
    html_code += tab(++tabs)+'<table class="'+css_class+'">\n'; 
    html_code += tab(++tabs)+'<tr>\n'; 
    html_code +=  generate_td(json); 
    html_code += tab(tabs--)+'</tr>\n'; 
    html_code += tab(tabs--)+'</table>\n'; 
    return html_code; 
} 

Answer 8

Вот два способа сделать то же самое, с или без JQuery:

// jquery way 
 
$(document).ready(function() { 
 
    
 
    var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]; 
 
     
 
    var tr; 
 
    for (var i = 0; i < json.length; i++) { 
 
    tr = $('<tr/>'); 
 
    tr.append("<td>" + json[i].User_Name + "</td>"); 
 
    tr.append("<td>" + json[i].score + "</td>"); 
 
    tr.append("<td>" + json[i].team + "</td>"); 
 
    $('table').first().append(tr); 
 
    } 
 
}); 
 

 
// without jquery 
 
function ready(){ 
 
var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]; 
 
    const table = document.getElementsByTagName('table')[1]; 
 
    json.forEach((obj) => { 
 
     const row = table.insertRow(-1) 
 
    row.innerHTML = ` 
 
     <td>${obj.User_Name}</td> 
 
     <td>${obj.score}</td> 
 
     <td>${obj.team}</td> 
 
    `; 
 
    }); 
 
}; 
 

 
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ 
 
    ready(); 
 
} else { 
 
    document.addEventListener('DOMContentLoaded', ready); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tr> 
 
     <th>User_Name</th> 
 
     <th>score</th> 
 
     <th>team</th> 
 
    </tr> 
 
</table>' 
 
<table> 
 
    <tr> 
 
     <th>User_Name</th> 
 
     <th>score</th> 
 
     <th>team</th> 
 
    </tr> 
 
</table>

Answer 9

Я потратил много O f раз разрабатывая различные отчеты. Итак, теперь у меня есть идея - создать веб-структуру для создания веб-отчетов. Я начал здесь:

https://github.com/ColdSIce/ReportUI

Теперь это угловой 4 модуль. Вы можете передать данные json в TableLayoutComponent и получить таблицу HTML. В таблице уже есть исправленный заголовок. Также вы можете исправить некоторые ваши столбцы по умолчанию или щелчком. Более того, вы можете настроить свойства таблицы, такие как цвет фона, цвет шрифта, высота строки и т. Д.

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