Wie die Anzeige der json-Daten in ein div, wenn die json-Daten in array

"data": [
    {
     "name": "Rehan",
     "location": "Pune",
     "description": "hello hi",
     "created_by": 13692,
     "users_name": "xyz",
    },
    {
      "name": "Sameer",
      "location": "Bangalore",
      "description": "how are you",
      "created_by": 13543,
      "users_name": "abc",
    },

Die API enthält mehr als 100 Daten, so, wie wir der Anzeige dieser Daten in einer html-Seite. wie diese:

Name: Rehan
location: Pune
Description: hello hi
created by: 13692
user name: xyz

Würden Sie müssen eine Schleife verwenden, und fügen Sie die gewünschten HTML-Elemente im DOM.
wie fügen Sie die HTML-Elemente im DOM. Ich bin eigentlich Neuling auf anzeigen von json-Daten
Studie einige tutorials ... viele davon online. Bitte Lesen Sie die Hilfe-Abschnitt über, wie man zur Nutzung dieser Website

InformationsquelleAutor Mohammad Iqbal | 2015-04-23

javascript jquery

Wie über dieses?

   var data = [
                    {
                     "name": "Rehan",
                     "location": "Pune",
                     "description": "hello hi",
                     "created_by": 13692,
                     "users_name": "xyz",
                    },
                    {
                      "name": "Sameer",
                      "location": "Bangalore",
                      "description": "how are you",
                      "created_by": 13543,
                      "users_name": "abc",
                    },
                ]

            var htmlText = '';

            for ( var key in data ) {
                htmlText += '<div class="div-conatiner">';
                htmlText += '<p class="p-name"> Name: ' + data[key].name + '</p>';
                htmlText += '<p class="p-loc"> Location: ' + data[key].location + '</p>';
                htmlText += '<p class="p-desc"> Description: ' + data[key].description + '</p>';
                htmlText += '<p class="p-created"> Created by: ' + data[key].created_by + '</p>';
                htmlText += '<p class="p-uname"> Username: ' + data[key].users_name + '</p>';
                htmlText += '</div>';
            }

            $('body').append(htmlText);

Dieser Ausgabe:

Name: Rehan
Location: Pune
Description: hello hi
Created by: 13692
Username: xyz

Name: Sameer
Location: Bangalore
Description: how are you
Created by: 13543
Username: abc

Vielen Dank für Ihre wunderbare Ausgabe @Eddie wer. Aber was ist zu tun, wenn ich will, weisen das id-Attribut auf jedes element ..?
sorry, habe ich vergessen zu erwähnen, die Bild-url auf json-api-Daten. was tun, wenn es ist auch ein Bild für die Anzeige. "Bild": "rajpurohit.s3-us-west-2.amazonaws.com/images/...",
du meinst wenn Sie möchten, fügen Sie die 'id' - Attribut zum Beispiel?
ja, du hast Recht. ich habe mit id-Attribut für die css-und auch um den Wert der div als parameter übergeben
Bitte überprüfen Sie aktualisierte code.. ich Hinzugefügt class-Attribut für die css

InformationsquelleAutor Eddie

Versuchen Sie dies:

<div id="json"></div>
<script>
        var obj = {"data": [
{
 "name": "Rehan",
 "location": "Pune",
 "description": "hello hi",
 "created_by": 13692,
 "users_name": "xyz",
},
{
  "name": "Sameer",
  "location": "Bangalore",
  "description": "how are you",
  "created_by": 13543,
  "users_name": "abc",
}
]}
var divId = document.getElementById("json")
for(var i=0;i<obj.data.length;i++)
for(var keys in obj.data[i]){
 console.log(keys +"-->"+obj.data[i][keys]);
 divId.innerHTML = divId.innerHTML + "<br/>"+ keys +"-->"+obj.data[i][keys];
}
</script>