Füllen Sie HTML-Tabelle mit JSON-Daten

Wären wir Ihnen sehr dankbar für einige Hinweise, [wir sind früh in die Codierung] und habe mir viele Beispiele können aber nicht unsere JSON importieren in die Tabelle.

In diesem moment haben wir die Daten der Tabelle in-line allerdings eine korrekt formatierte JSON-Datei ist jetzt verfügbar und wird automatisch aktualisiert, und wir möchten, laden Sie Sie in die Tabelle on the fly, wenn die Seite geladen wird.

Dies ist ein Beispiel dafür, was derzeit verwenden:

<div>
<p> *** OTHER STUFF HERE ***<p/>
    <table id="gable">
        <colgroup>
            <col class="twenty" />
            <col class="fourty" />
            <col class="thirtyfive" />
            <col class="twentyfive" />
        </colgroup>
        <tr>
            <th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspCOUNTRY</th>
            <th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspLOCATION</th>
            <th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspBALANCE</th>
            <th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspDATE</th>
        </tr>
    </table>
</div>
<script>
var data = [
    { "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
    { "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
    { "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
    { "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
    { "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
];
var table = document.getElementById('gable');
data.forEach(function(object) {
    var tr = document.createElement('tr');
    tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
        '<td>' + object.LoC + '</td>' +
        '<td>' + object.BALANCE + '</td>' +
        '<td>' + object.DATE + '</td>';
    table.appendChild(tr);
});
</script>

Gibt es viel mehr Linien von Daten, verfügt die Tabelle über CSS-styling und wendet die sortTable(n) - Funktion in die Header. Es zeigt perfekt, aussieht und funktioniert wie wir wollen,

Wir haben Gegoogelt [lose] und versucht, die verschiedenen Last /Auffüllen Skripte und versuchte, Holen Sie sich die Beispiel auf w3schools arbeiten - https://www.w3schools.com/js/js_json_html.asp - ach, wir sind ziemlich neu hier.

JSON-Datei /assets/Probe.JSON ist korrekt formatiert ist und die Anforderungen erfüllt.

Wie machen wir einen einfachen import von JSON zum füllen der Tabelle id="Giebel"?

anstatt also mit der json inline wie dein code oben, Sie wollen, um es zu laden aus einer externen Datei?
Ja - 100%, wir wollen Sie zum entfernen der inline-Daten und nutzen Sie unsere JSON-Datei /assets/Probe.JSON, die richtig formatiert ist und den Anforderungen entspricht. Wie machen wir einen einfachen import von JSON zum füllen der Tabelle id="Giebel"?

InformationsquelleAutor BorisNZ | 2018-07-11

Ok, also in dieser Lösung, die ich annehmen werde, dass Sie Ihre externe json-Datei namens " Beispiel.json'

Ihrem externen Datei sollte in etwa so Aussehen
Beispiel.json:

[
  { "COUNTRY":"UK", "LoC":"London", "BALANCE":"78,573", "DATE":"1/06/2018" },
  { "COUNTRY":"US", "LoC":"New York", "BALANCE":"43,568", "DATE":"18/05/2018" },
  { "COUNTRY":"PL", "LoC":"Kraków", "BALANCE":"12,362", "DATE":"22/06/2018" },
  { "COUNTRY":"AU", "LoC":"Townsville", "BALANCE":"7,569", "DATE":"1/07/2018" },
  { "COUNTRY":" ", "LoC":"BALANCE:", "BALANCE":"142,072", "DATE":" " }
]

Den html-bleibt die gleiche, alle änderungen, die gemacht wurden, in die script-tags. Ich teilen Sie die Funktionalität in 2 neue Funktionen. Die erste Funktion (get_json_data) gibt die json-Daten von der externen json-Datei. Die zweite Funktion (append_json) fügt die Daten in die Tabelle.

Habe ich Kommentare zu den ganzen code zu erklären, was alles zu tun ist. wenn Sie Fragen haben oder wenn etwas unklar ist, lasst es mich wissen.

hier ist der code für die html-Datei:

<div>
        <p> *** OTHER STUFF HERE ***<p/>
        <table id="gable">
            <colgroup>
                <col class="twenty" />
                <col class="fourty" />
                <col class="thirtyfive" />
                <col class="twentyfive" />
            </colgroup>
            <tr>
                <th onclick="sortTable(0)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspCOUNTRY</th>
                <th onclick="sortTable(1)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspLOCATION</th>
                <th onclick="sortTable(2)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspBALANCE</th>
                <th onclick="sortTable(3)"><span class="glyphicon glyphicon-sort"></span>&nbsp&nbspDATE</th>
            </tr>
        </table>
    </div>
    <script>
        //first add an event listener for page load
        document.addEventListener( "DOMContentLoaded", get_json_data, false ); //get_json_data is the function name that will fire on page load

        //this function is in the event listener and will execute on page load
        function get_json_data(){
            //Relative URL of external json file
            var json_url = 'example.json';

            //Build the XMLHttpRequest (aka AJAX Request)
            xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() { 
                if (this.readyState == 4 && this.status == 200) {//when a good response is given do this

                    var data = JSON.parse(this.responseText); //convert the response to a json object
                    append_json(data);//pass the json object to the append_json function
                }
            }
            //set the request destination and type
            xmlhttp.open("POST", json_url, true);
            //set required headers for the request
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            //send the request
            xmlhttp.send(); //when the request completes it will execute the code in onreadystatechange section
        }

        //this function appends the json data to the table 'gable'
        function append_json(data){
            var table = document.getElementById('gable');
            data.forEach(function(object) {
                var tr = document.createElement('tr');
                tr.innerHTML = '<td>' + object.COUNTRY + '</td>' +
                '<td>' + object.LoC + '</td>' +
                '<td>' + object.BALANCE + '</td>' +
                '<td>' + object.DATE + '</td>';
                table.appendChild(tr);
            });
        }
    </script>

DANKE!!! @RyDog - 100% perfekte Lösung! Funktioniert Super nur wie erforderlich. Ihre Zeit und Mühe mit der assist ist sehr geschätzt - insbesondere die Kommentare!! Wir werden die Implementierung von JSON-Import in Tabellen, so werden wir dies als die Vorlage! Nochmals danke!

InformationsquelleAutor RyDog

können Sie eine Funktion um die Tabelle zu erstellen, unabhängig von Ihrer Daten-Felder:

function updateTable(tableId, jsonData){

  var tableHTML = "<tr>";
  for (var headers in jsonData[0]) {
    tableHTML += "<th>" + headers + "</th>";
  }
  tableHTML += "</tr>";

  for (var eachItem in jsonData) {
    tableHTML += "<tr>";
    var dataObj = jsonData[eachItem];
    for (var eachValue in dataObj){
      tableHTML += "<td>" + dataObj[eachValue] + "</td>";
    }
    tableHTML += "</tr>";
  }

  document.getElementById(tableId).innerHTML = tableHTML;
}

InformationsquelleAutor sorh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.