Wie verwende ich AJAX, um die Daten aus einer JSON-Datei in einer Tabelle anzuzeigen?

Ich arbeite mit jQuery zu AJAX a .json Datei und zeigen Sie es in einer Bootstrap-Tabelle. Ich konnte eine Vorlage für die Tabelle in meiner HTML-Datei erstellen. Die .json-Datei, die ich habe, ist lokal, aber ich bin mir nicht sicher, wie ich es in der Tabelle anzeigen soll. Ich beginne und lese Tutorials, wie man das programmiert. Hier ist, was ich bisher:Wie verwende ich AJAX, um die Daten aus einer JSON-Datei in einer Tabelle anzuzeigen?

Hier ist, was in meiner HTML-Datei ist

<!DOCTYPE html> 
<html lang = "en"> 
<head> 

    <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 

<body> 
    <div class = "container"> 

     <table table id = "table" data-url="students.json"> 
      <thead> 
       <tr> 
        <th data-field = "fname">First Name</th> 
        <th data-field = "lname">Last Name</th> 
        <th data-field = "startDate">Start Date</th> 
        <th data-field = "street">Street</th> 
        <th data-field = "city">City</th> 
        <th data-field = "state">State</th> 
        <th data-field = "zip">Zip Code</th> 
        <th data-field = "phone">Phone</th> 
        <th data-field = "year">Year</th> 
       </tr> 
      </thead> 
     </table> 
    </div> 
</body> 
</html>

Dies ist ein Ausschnitt aus der Art der Daten, die in der JSON-Datei ist.

{ 
    "fname": "Lois", 
    "lname": "Hanson", 
    "startDate": "3/12/93", 
    "street": "923 North 1400 East", 
    "city": "Williamsburg", 
    "state": "ID", 
    "zip": 93673, 
    "phone": "673-3114", 
    "year": 4 
},

Wäre ich in der Lage, den gesamten Code in einer HTML-Datei zu schreiben?

Quelle

2016-07-02 sunfton

Schleife durch die AJAX-Antwort und appendChild tr für jeden Datensatz. Das sollte es tun. –

Sie müssen einen ajax Aufruf machen, um die lokale JSON-Datei zu erhalten. Parsen Sie es und binden Sie es an html Element. d. h. table in Ihrem Fall.

$.ajax({ 
    url: 'students.json', 
    type: 'get', 
    dataType: 'json', 
    error: function(data){ 
    }, 
    success: function(data){ 
    $('#table').append(data);    
    } 
});

den obigen Code in eine javascript Funktion wickeln und stellen Sie sicher, dass es auf die Last Ihrer html ausführt.

Quelle

2016-07-02 18:28:24 Venky

Zuerst erstellen Sie JavaScript in Ihrem Verzeichnis-Datei und die HTML-Datei anzuhängen, dann den Code unten in dieser Datei wickeln:

$(document).ready(function() { 
    $.ajax({ 
     url: 'students.json', 
     type: 'get', 
     dataType: 'json', 
     error: function(data){ 
     }, 
     success: function(data){ 
      var tr = $('<tr>'); 
      tr.append('<td>' + data.fname + '<td>'); 
      tr.append('<td>' + data.lname + '<td>'); 
      tr.append('<td>' + data.startDate + '<td>'); 
      tr.append('<td>' + data.city + '<td>'); 
      tr.append('<td>' + data.state + '<td>'); 
      tr.append('<td>' + data.zip + '<td>'); 
      tr.append('<td>' + data.phone + '<td>'); 
      tr.append('<td>' + data.year + '<td>'); 

      $('#table').append(tr);   
     } 
    }); 
});

Quelle

2016-07-02 20:06:43 MHS

Wie verwende ich AJAX, um die Daten aus einer JSON-Datei in einer Tabelle anzuzeigen?

Antwort

Verwandte Themen