2016-06-09 4 views
-1

Wie kann ich JSON in Tabelle HTML anzeigen?leere Seite - JSON zu HTML-Tabelle

Dies ist mein Code und es funktioniert nicht, ich sehe eine leere Seite

<script> 
var xmlhttp = new XMLHttpRequest(); 
var url = "http://37.247.116.189:88/stalker_portal/api/users"; 

xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     myFunction(xmlhttp.responseText); 
    } 
} 
xmlhttp.open("GET", url, true); 
xmlhttp.send(); 

function myFunction(response) { 
    var arr = JSON.parse(response); 
    var i; 
    var out = "<table>"; 

    for(i = 0; i < arr.results; i++) { 
     out += "<tr><td>" + 
     arr[i].login + 
     "</td><td>" + 
     arr[i].full_name + 
     "</td><td>" + 
     arr[i].phone + 
     "</td></tr>"; 
    } 
    out += "</table>"; 
    document.getElementById("mydata").innerHTML = out; 
} 
</script> 

aber seine nicht funktioniert, ich weiß nicht, wo das Problem liegt?

+1

Was ist das Problem? Sie müssen ein grundlegendes Debugging durchführen. Verwenden Sie die Entwicklertools in Ihrem Browser. Sehen Sie sich die Registerkarte "Netzwerk" an. Wird die Anfrage gestellt? Entspricht die Antwort Ihren Erwartungen? Schau dir die Konsole an. Gibt es Fehler? Fügen Sie dem Code einige 'console.log()' Anweisungen hinzu. Ändert 'onreadystate' Feuer? Gehen die 'if'-Bedingungen immer vor? Was ist der Wert von 'responseText'? Wird 'myFunction' jemals ausgelöst? Gibt 'JSON.parse' den erwarteten Wert zurück? Hat "out" den erwarteten Wert? – Quentin

+0

Nun, erhalten Sie einen Fehler? Haben Sie Ihren Code debugged, um zu sehen, dass alles wie erwartet funktioniert? – Amy

+0

Wir brauchen mehr Info. Gibt es beispielsweise einen Javascript-Fehler in der Konsole? Können Sie die Daten aus der Antwort drucken, bevor Sie versuchen, die Tabelle zu rendern? –

Antwort

0

Ich habe gerade dieser Teil, seine Arbeit gut, wo seine die Druckdaten:

<html> 
 
    <head> 
 
    \t <script > 
 
    window.onload = function() { 
 
     //var arr = JSON.parse(response); 
 
     var arr2 = [ 
 
     {"firstName":"John", "lastName":"Doe"}, 
 
     {"firstName":"Anna", "lastName":"Smith"}, 
 
     {"firstName":"Peter", "lastName":"Jones"} 
 
    \t ] 
 
     var i; 
 
     var out = "<table>"; 
 
    
 
     for(i = 0; i < arr2.length; i++) { 
 
      out += "<tr><td>" + 
 
      arr2[i].firstName + 
 
      "</td><td>" + 
 
      arr2[i].lastName + 
 
      "</td><td></tr>" 
 
     } 
 
     out += "</table>"; 
 
     document.getElementById("mydata").innerHTML = out; 
 
    } 
 
    </script> 
 
    
 
    \t </head> 
 
    <body> 
 
    
 
    <div id='mydata'> 
 
    </div> 
 
    </body> 
 
    </html>

Der Rest überprüfen würde, wenn Sie http Anrufe richtig werden gemacht, wenn Sie Zugang haben. Überprüfen Sie Ihre Entwicklerkonsole mit der rechten Maustaste -> inspect. Stellen Sie zuerst sicher, dass Sie die JSON-Datei richtig erhalten, dann verwenden Sie diesen Code,