jQuery JSON-Parser: Fehler "Unerwarteter Bezeichner"

Question

Ich habe ein kleines (Test-) Skript erstellt, das eine JSON-Datei analysiert (ich verwende https://jsonplaceholder.typicode.com im folgenden Beispiel) und Tabellenzeilen aus dem resultierenden Objekt erstellt.

Ich versuche anfügen diese Zeilen zu einer Tabelle.

Siehe die jsFiddle HERE.

Ich bekomme einen Unexpected identifier Fehler, den ich unerklärlich finde. Was mache ich falsch?

UPDATE: mein aktualisiert Geige HERE See. Danke an alle die geholfen haben.

Answer 1

Sie waren die Daten falsch angehängt. Ersetzen Sie diesen Teil des Codes dadurch.

var root = 'https://jsonplaceholder.typicode.com'; 
 
var tableRow = ''; 
 
$.ajax({ 
 
    url: root + '/users', 
 
    method: 'GET', 
 
    success: function(data) { 
 
    for (var i = 0; i < data.length; i++) { 
 
     var tableRow = '<tr><td>' + data[i].name + '</td><td>' + data[i].email + '</td><td>' + data[i].email + '</td></tr>'; 
 
     $("#dataTable").find('tbody').append(tableRow); 
 
    } 
 
    }, 
 
    error: function() { 
 
    var tableRow = '<tr><td>There is no data to display</td></tr>'; 
 
    console.log(tableRow); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table" id="dataTable"> 
 
    <thead> 
 
    <tr> 
 
     <th>Full Name</th> 
 
     <th>Email</th> 
 
     <th>Address</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody></tbody> 
 
</table>

Answer 2

verschieben Sie einfach den Teil, wo Sie Ihre HTML der Tabelle in den Erfolg und Fehler Handler setzen. Ajax ist async, Sie rufen die Zeile $("#dataTable tbody").html(tableRow);, bevor Sie die tatsächliche Antwort erhalten, so dass TableRow noch leer ist;

var root = 'https://jsonplaceholder.typicode.com'; 
var tableRow = ''; 
$.ajax({ 
    url: root + '/users', 
    method: 'GET', 
    success: function(data) { 
    var results = ''; 
    for (var i = 0; i < data.length; i++) { 
     results += '<tr><td>' + data[i].name + '</td><td>' + data[i].email + '</td><td>' + data[i].email + '</td></tr>'; 
    } 
      $("#dataTable tbody").html(results); 

    }, 
    error: function() { 
    var tableRow = '<tr><td>There is no data to display</td></tr>'; 
    console.log(tableRow); 
    $("#dataTable tbody").html(tableRow); 

    } 
}); 

fiddle