Druck json Werte in html

ich diese Werte aus meiner json in meiner Konsole bekommen: Object {test: 0, howmuch: 0, day: 22, calls: Array[0]}Druck json Werte in html

Aber wie kann ich diese auf meinem html drucken? Ich habe versucht, jQuery zu machen, aber ich konnte nicht bekommen. Auch wird es für mich einfach sein, diese Werte von einer URL zu bekommen?

jquery:

$(document).ready(function() { 
    $('#get-data').click(function() { 
     var showData = $('#show-data'); 

     $.getJSON('real-data.json', function (data) { 
      console.log(data); 
      alert(data); 

      showData.empty(); 

     }); 

     showData.text('Loading the JSON file.'); 
    }); 
});

json:

{ 
    "test": 0, 
    "howmuch": 0, 
    "day": 22, 
    "calls": [ 

    ] 
}

html:

<!DOCTYPE html> 
<html> 
    <head> 
    <script data-require="[email protected]" data-semver="1.9.1" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script> 

     <script src="real-data.js"></script> 
    <style>body{ background: #F9F9FA; }</style> 
    </head> 

    <body> 
    <a href="#" id="get-data">Get JSON data</a> 
    <div id="show-data"></div> 
    </body> 
</html>

Quelle

2016-05-31 Raduken

Nun, wie wollen Sie es sehen? Sie müssten es in den Inhalt einiger Elemente in Ihrem HTML schreiben (vermutlich das # show-data div), die anzeigen, welche Felder Sie immer möchten. –

zeigt in einem div – Raduken

Sie haben keine JSON-Zeichenfolge, Sie haben ein JavaScript-Objekt. Wenn Sie die Zeichenfolge wieder zurück erhalten möchten, müssen Sie 'JSON.stringify' verwenden. Aber vermutlich würden Sie es lieber formatieren, um besser auszusehen. Aber Sie müssen entscheiden, wie Sie wollen, dass es erscheint und dann HTML-Elemente anhängen, um dies zu erreichen. –

showData.empty()sein sollte

Quelle

2016-05-31 14:40:38 dyagmin

Ich habe geändert, aber ich bekomme immer noch nicht – Raduken

Welche nicht tatsächlich die Daten im Objekt zeigen wird, die vermutlich nicht das ist, was das OP will. –

Ja, ich weiß, ich gerade neu auf diesem lol – Raduken

Nicht sicher, ob Sie nach etwas wie diesem suchen. Nicht in der Lage $.getJSON zu verwenden, also angenommen var x hat den erforderlichen Wert.

var x ={ 
    "test": 0, 
    "howmuch": 0, 
    "day": 22, 
    "calls": [ 
    ] 
} 

$(document).ready(function() { 
    $('#get-data').click(function() { 
     var _jsonString = ""; 

for(var key in x){ 
    _jsonString +="key "+key+" value "+x[key]+ '</br>'; 
} 

$("#show-data").append(_jsonString) 
}); 
});

Jsfiddle

Quelle

2016-05-31 14:54:00 brk

vielen Dank, aber ich brauche den JSON, was kommt aus der Datei: real-data.json Ich kann es nicht in eine Variable drehen, weil die JSON wird sich von Tag zu Tag ändern. – Raduken

anstelle von x verwenden Sie die Antwort von $ .getJSON – brk

Ich habe versucht, $ .getJSON ('Real-Daten.json ', Funktion (Daten) { Alarm (Daten); }); aber ich habe Last von Fehlern :( – Raduken

Sie einen Iterator benötigen json Objektdaten in HTML angezeigt werden soll. In jQuery können Sie $ .each verwenden oder in einfachem Javascript können Sie eine For-In-Schleife verwenden.

$.each(data, function(i, val){ 
    $('div').append(val.test); 
});

Oder:

for (var i in data) { 
    $('div').append(data[i].test); 
    $('div').append(data[i].howmuch); 
    $('div').append(data[i].day); 
}

diesen Beitrag finden Sie weitere Beispiele: jquery loop on Json data using $.each

Quelle

2016-05-31 14:54:28 Rob

können Sie eine jsfiddle? Ich konnte es nicht funktionieren. Danke – Raduken

Stellen Sie sicher, dass die Schleife in die getJSON Callback-Funktion: https://jsfiddle.net/tecfy4fL/ – Rob

danke, ich erhalte diesen Fehler: XMLHttpRequest kann nicht laden https: //testapinow.com=0 Kein 'Access-Control-Allow-Origin'-Header ist auf der angeforderten Ressource vorhanden Origin' http:// 0.0 .0.0: 8000 'ist daher kein Zugriff erlaubt. Die Antwort hatte den HTTP-Statuscode 400. – Raduken

var json = { 
 
    "test": 0, 
 
    "howmuch": 0, 
 
    "day": 22, 
 
    "calls": [ 
 

 
    ] 
 
}; 
 
$('#get-data').on('click', function() { 
 
    $('#show-data').html(JSON.stringify(json)); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#" id="get-data">Get JSON data</a> 
 
<div id="show-data"></div>

Quelle

2016-05-31 14:59:54

danke, aber das problem ich brauche diese werte aus einer json-datei, so kann ich nicht in eine js var konvertieren – Raduken

ändern Sie einfach die Variable für y unsere echte JSON-Datei –

Ich habe das versucht, aber nicht funktioniert :(: $ .getJSON ('real-data.json', Funktion (Daten) { Alert (Daten); }); $ ('# get-data'). On ('click', function() { $ ('# show-data') .html (JSON.stringify (json)); }); – Raduken

Druck json Werte in html

Antwort

Verwandte Themen