Holen Sie json-Daten in der html Tabelle

Habe ich eine json-Daten aus einer mysql-Tabelle, die abgefragt wird von einem php-Skript. Die json-Daten kommen korrekt, wie diese:

{
"report": [{
    "Mes": "Abril",
    "Dia": "13",
    "Local": "Lisboa",

}]
}

Ich versuchte diesen code, um die Daten in eine html-Tabelle. Aber da ich bin ein noob ich weiß nicht, warum das nicht funktioniert.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script>
    $.getJSON("http://ib.esy.es/_php/select_comissao1.php",
    function (data) {
        var tr = data.report
        for (var i = 0; i < data.length; i++) {
            tr = $('<tr/>');
            tr.append("<td>" + data[i].Mes + "</td>");
            tr.append("<td>" + data[i].Dia + "</td>");
            tr.append("<td>" + data[i].Local + "</td>");
            $('.table1').append(tr);
        }
    });
    </script>

    <table class="table1">
        <tr>
            <th>Mes</th>
            <th>Dia</th>
            <th>Hora</th>
        </tr>
    </table>

Kann mir jemand helfen?

  • Was ist das konkrete Problem, das nicht funktioniert? Jetzt ist es ziemlich schwierig, herauszufinden, was Sie gefragt haben, über.
InformationsquelleAutor Jose Borges | 2016-04-17
  1. 1

    Da sagst du, dass die JSON zurückkommt, und vorausgesetzt, die Objekt-Struktur in der Frage richtig ist, ein paar Dinge stehen für mich:

    1) ich verstehe nicht, warum diese Zeile var tr = data.report ist in den code. Du bist Einstellung tr auf Ihre abgerufenen Daten und dann überschreiben Sie es mit einem jquery-Objekt in der Schleife.

    2) Der Grund, warum man nicht in der Lage, um die Daten aus deinem JSON ist, dass data ist die Wurzel von Ihrem Objekt. Die Daten, die Sie versuchen zu schreiben, um die Tabelle in der report Eigenschaft innerhalb der top-level - data Objekt. Sie können aktualisieren Sie Ihr javascript um:

    for (var i = 0; i < data.report.length; i++) {
  var tr = $('<tr/>');
  $(tr).append("<td>" + data.report[i].Mes + "</td>");
  $(tr).append("<td>" + data.report[i].Dia + "</td>");
  $(tr).append("<td>" + data.report[i].Local + "</td>");
  $('.table1').append(tr);
}

    Mit dem vorherigen code, Sie waren Indizierung in der data Objekt, das kein array. Dieses update stellt sicher, dass die Indizierung geschieht auf der report Eigenschaft, die ein array.

    Probe

    JS:

    $(document).ready(function() {
  //Using the JSON format from your question
  var data = {
    "report": [{
        "Mes": "Abril",
        "Dia": "13",
        "Local": "Lisboa",

    }]
  };

  //Loop through data.report instead of data
  for (var i = 0; i < data.report.length; i++) {
    var tr = $('<tr/>');
    
    //Indexing into data.report for each td element
    $(tr).append("<td>" + data.report[i].Mes + "</td>");
    $(tr).append("<td>" + data.report[i].Dia + "</td>");
    $(tr).append("<td>" + data.report[i].Local + "</td>");
    $('.table1').append(tr);
  }
});

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table1">
  <tr>
    <th>Mes</th>
    <th>Dia</th>
    <th>Hora</th>
  </tr>
</table>

    • Danke für die Antwort, aber es wird keine Ausgabe kommen.
    • Ich habe ein funktionstüchtiges Beispiel, um die Antworten für Ihre Referenz. Ich mache das nicht der AJAX-Aufruf, aber wenn Sie bekommen die Daten wieder korrekt, dies sollte funktionieren
    • Endlich hat es geklappt! Ich danke Ihnen sehr!
    • Aber immer noch keine Ausgabe, ich denke mal der Fehler ist, wie push-Daten von der url.
    InformationsquelleAutor Jonathan Michalik
  2. 0

    Sind Sie sehr nahe. Beim senden von asynchronen requests über JavaScript, die Sie benötigen, um die Anfrage zu senden, um einen Pfad, der relativ zu Ihren domain-Namen. In diesem Fall sollte es sein /_php/select_comissao1.php. Entfernen Sie einfach Ihren domain-Namen (http://ib.esy.es) aus dem Anfrage-Pfad.

    index.php

    <!DOCTYPE html>
<html>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script>
       /**
         * Replace "http://ib.esy.es/_php/select_comissao1.php" with a relative path.
         * 
         * In this case, it should be "/_php/select_comissao1.php"
         */
        $.getJSON("/_php/select_comissao1.php",
            function (data) {
                var tr = data.report
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].Mes + "</td>");
                    tr.append("<td>" + data[i].Dia + "</td>");
                    tr.append("<td>" + data[i].Local + "</td>");
                    $('.table1').append(tr);
                }
            });
    </script>

    <table class="table1">
        <tr>
            <th>Mes</th>
            <th>Dia</th>
            <th>Hora</th>
        </tr>
    </table>
</body>
</html>

    Update

    Wenn Ihre Anwendung nicht ausgeführt wird, auf http://ib.esy.es auszuführen, können Sie eine cross-domain-ajax-Anfrage mit JSONP.

    Beispiel

    <!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"> </script>
<script>
    $.ajax({
        url: "http://ib.esy.es/_php/select_comissao1.php",
        type: "post",
        dataType: "jsonp", //jsonp allows cross-domain ajax requests.
        success: function (data) {
                var tr = data.report
                for (var i = 0; i < data.length; i++) {
                    tr = $('<tr/>');
                    tr.append("<td>" + data[i].Mes + "</td>");
                    tr.append("<td>" + data[i].Dia + "</td>");
                    tr.append("<td>" + data[i].Local + "</td>");
                    $('.table1').append(tr);
                }
        }
    });
</script>

<table class="table1">
    <tr>
        <th>Mes</th>
        <th>Dia</th>
        <th>Hora</th>
    </tr>
</table>
</body>
</html>
    • Danke für die Antwort, aber keine Ausgabe kommt
    • Der code oben ist ein komplettes Beispiel. Es sollte funktionieren out of the box. Wenn Sie weiterhin Probleme haben, drücken Sie F12 auf Ihrer Tastatur, öffnen Sie die developer tools. Dann gehen Sie auf die console Register (manchmal auch als JS Console). Lassen Sie mich wissen, wenn Sie irgendwelche Fehler in der Konsole.
    InformationsquelleAutor MParsons
  3. 0

    LÖSUNG:

    Endlich den funktionierenden code. Es hatte so zu sein, wie ich war schob den Daten von php. Der kleine/große Unterschied war .dann

    $.getJSON("http://ib.esy.es/select_comissao1.php").then(function(data)
{console.log(data);

   var tr = data
    for (var i = 0; i < data.report.length; i++) {
    var tr = $('<tr/>');

    //Indexing into data.report for each td element
    $(tr).append("<td>" + data.report[i].Mes + "</td>");
    $(tr).append("<td>" + data.report[i].Dia + "</td>");
    $(tr).append("<td>" + data.report[i].Local + "</td>");
    $('.table1').append(tr);
    }

});
    InformationsquelleAutor Jose Borges
Schreibe einen Kommentar