it-swarm.com.de

Analysieren von JSON-Objekten für eine HTML-Tabelle

Ich versuche, eine "Leaderboard" -Tabelle basierend auf JSON-Daten anzuzeigen.

Ich habe viel über das JSON-Format gelesen und einige anfängliche Hindernisse überwunden, aber mein Javascript-Wissen ist sehr begrenzt und ich brauche Hilfe!

Meine JSON-Daten sehen im Wesentlichen so aus:

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

Was ich brauche, ist in der Lage zu sein, dieses Array zu durchlaufen und eine Tabellenzeile oder ein Listenelement für jedes Objekt zu generieren. Das Array enthält eine unbekannte Anzahl an Gesamtobjekten, aber jedes hat dasselbe Format - drei Werte: Name, Bewertung, Team.

Bisher habe ich den folgenden Code verwendet, der bestätigt, dass die Objekte erfolgreich in die Konsole geladen werden. 

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

ich bin mir jedoch nicht sicher, wie ich über sie iterieren und sie in die HTML-Tabelle analysieren soll.

Der nächste Schritt besteht darin, die Einträge nach Punkten in absteigender Reihenfolge zu sortieren ...

Jede Hilfe wäre sehr dankbar.

BEARBEITEN:

Code unten aktualisiert, das funktioniert:

$.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);
    }
});

(Der $ .parseJSON war nicht notwendig, wir können 'data' verwenden, da das JSON-Array bereits analysiert wurde, glaube ich)

40
user2478342

Führen Sie eine Schleife über jedes Objekt aus und hängen Sie bei jeder Wiederholung eine Tabellenzeile mit den relevanten Daten an.

$(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

87
pmandell

Sie können das einfache jQuery-Plugin verwenden

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>
7
shabeer

Schleifen Sie über jedes Objekt, drücken Sie ein String-Array und verbinden Sie es. In Zieltabelle anhängen, ist es besser.

$(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('')));
});
5
Kamruzzaman

Sie können KnockoutJS mit jQuery verwenden. KnockoutJS verfügen über intelligente Datenbindungsfunktionen. Mit der foreach-Bindung -Funktion können Sie Ihren Code wie folgt schreiben:

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 mit Ihren Dummy-Daten

4
Aminul

Erstellen Sie eine HTML-Tabelle aus einem JSON-Array von Objekten, indem Sie $ wie unten gezeigt erweitern 

$.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));
        };

und wie folgt verwenden:

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

wo TableCont ist ein div

2
Dr.sai

eine weitere nette rekursive Methode zum Generieren von HTML aus einem geschachtelten JSON-Objekt (derzeit werden keine Arrays unterstützt):

// 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;
}
1
chenchuk

Dieser Code wird viel helfen

function isObject(data){
    var tb = document.createElement("table");

    if(data !=null) {
        var keyOfobj = Object.keys(data);
        var ValOfObj = Object.values(data);

        for (var i = 0; i < keyOfobj.length; i++) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var key = document.createTextNode(keyOfobj[i]);

            td.appendChild(key);
            tr.appendChild(td);
            tb.appendChild(tr);

            if(typeof(ValOfObj[i]) == "object") {

                if(ValOfObj[i] !=null) {
                    tr.setAttribute("style","font-weight: bold");   
                    isObject(ValOfObj[i]);
                } else {
                    var td = document.createElement('td');
                    var value = document.createTextNode(ValOfObj[i]);

                    td.appendChild(value);
                    tr.appendChild(td);
                    tb.appendChild(tr);
                }
            } else {
                var td = document.createElement('td');
                var value = document.createTextNode(ValOfObj[i]);

                td.appendChild(value);
                tr.appendChild(td);
                tb.appendChild(tr);
            }
        }
    }
}
0
user11303834

Hier ist eine andere Möglichkeit, Json-Objekte in die HTML-Tabelle zu parsen 

//EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];

for (var i = 0; i < d.length; i++) {
  for (var key in d[i]) {
if (col.indexOf(key) === -1) {
  col.Push(key);
}
  }
}

// CREATE DYNAMIC TABLE.
var table = document.createElement("table");

// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1);    // TABLE ROW.               
                 
for (var i = 0; i < col.length; i++) {
  var th = document.createElement("th");// TABLE HEADER.
  th.innerHTML = col[i];
  tr.appendChild(th);
}

// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < d.length; i++) {
  tr = table.insertRow(-1);

  for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = d[i][col[j]];
  }
}

// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

0
Bavyasrisekar

Dieser ist hässlich, möchte aber nur einige andere Optionen in den Mix geben. Dieser hat keine Schleifen. Ich benutze es zum Debuggen

var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")

$('#myDiv').html(myHtmlTableObj)

Beispiel:

    var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
    var myStrObj = JSON.stringify(myObject)
    var myHtmlTableObj = myStrObj.replace(/\"/g,"").replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")

    $('#myDiv').html(myHtmlTableObj)
#myDiv table td{background:whitesmoke;border:1px solid lightgray}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='myDiv'>table goes here</div>

0
jleviaguirre

Ich habe viel Zeit damit verbracht, verschiedene Berichte zu entwickeln. Nun habe ich eine Idee - ein Web-Framework zum Erstellen von Web-Berichten erstellen. Ich habe hier angefangen:

https://github.com/ColdSIce/ReportUI

Jetzt ist es ein angle 4 Modul. Sie können Ihre json - Daten an TableLayoutComponent übergeben und eine HTML-Tabelle als Ergebnis erhalten. Die Tabelle hat bereits einen festen Kopf. Sie können auch einige Ihrer Spalten standardmäßig oder durch Klicken korrigieren. Darüber hinaus können Sie die Tabelleneigenschaften wie Hintergrundfarbe, Schriftfarbe, Zeilenhöhe usw. anpassen. 

Wenn Sie interessiert sind, können Sie mir bei diesem Projekt helfen und helfen.

0
Secret Aga

Es gibt zwei Möglichkeiten, mit oder ohne jQuery dasselbe zu tun:

// 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>

0
kevguy