JSON in HTML umwandeln

Ich habe eine JSON-Datei, die eine Liste von Liedern enthält, die ich mit einer jquery-Funktion in bestimmte HTML-IDs verschieben möchte. Hier ist 2 der fünf Songs in meiner JSON-Datei (alle das gleiche Format wie folgt vor:JSON in HTML umwandeln

{ 
    "songs": [ 
     { 
      "title": "Hotel California", 
      "artist": "Eagles", 
      "album": "Hotel California", 
      "album_cover": "https://en.wikipedia.org/wiki/Hotel_California_(Eagles_album)#/media/File:Hotelcalifornia.jpg", 
      "release_date": "1976", 
      "site": "http://www.allmusic.com/album/hotel_california", 
      "generes": "Rock" 
     }, 
     { 
      "title": "Back in Black", 
      "artist": "ACDC", 
      "album": "Back in Black", 
      "album_cover": "http://www.billboard.com/files/styles/review_main_image/public/media/acdc-back-in-black-album-cover-650.jpg", 
      "release_date": "1980", 
      "site": "http://www.allmusic.com/album/back_in_black", 
      "generes": "Rock" 
     } 
    ] 
}

Hier ist mein html, dass ich meine Daten versuche zu haben geladen:

<!doctype html> 
<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <title>Json</title> 
</head> 
<body> 
    <a id="site" href="#"> 
    <img id="coverart" src="noalbum.png" /> 
    </a> 
    <h1 id="title"></h1> 
    <h2 id="artist"></h2> 
    <h2 id="album"></h2> 
    <p id="date"></p> 
    <ul id="genres"> 
    </ul> 
</body> 
<script src="my.js"></script> 
</html>

Ich versuche, . eine Funktion, die diese Tags mit den entsprechenden Daten füllt und wiederholt den Vorgang, bis alle Songs zu erstellen, um das oben hTML-Format geformt sind nur wiederholt Hier ist meine js Datei so weit:

$("a").click(function() { 
    GetIndexData() 
}); 

function GetIndexData() { 
    var param = "&nocache=" + Math.random() * 1000000; 
    $.getJSON('my.js', param, function(data) { 
    $.each(data, function(key, val) { 
     $('#' + key).html(val); 
    }) 
    }); 
}

Jede Hilfe wäre Gre Danke!

Quelle

2016-10-10 Jack

Eine schnelle Sache: Wenn Ihre JSON-Datei 'lab4' heißt, dann soll sie in Ihrem getJSON-Aufruf' lab4.json' lauten. Erhalten Sie auch irgendwelche Konsolenfehler? –

Es ist nicht klar, wie Sie wollen, dass JSON im HTML angezeigt wird. Der JSON enthält ein Array von Songs, aber Sie haben nur einen Platz für einen Song im HTML. Welcher Song sollte in den HTML gehen? – Barmar

Warum ist 'Genres' eine Liste im HTML, aber eine einzelne Zeichenfolge im JSON? Sollte es nicht so etwas wie "Genres" sein: ["Rock", "Punk"] ' – Barmar

Sie ziehen also eine JSON-Datei, die eine Liste von Liedern und die Details enthält. Ich kam auf der Grundlage der Kabeljau-Snipides, die Sie zur Verfügung gestellt haben.

Sie müssen eine HTML-Vorlage einrichten, die mit Ihren Daten gefüllt wird. Dazu müssen Sie Klassen anstelle von IDs verwenden. Ich lief das Array von Songs durch eine ForEach-Schleife, um alles zu füllen.

Ich änderte auch Ihre Generes in ein Array; wenn es so sein soll. Wenn es nicht ist, habe ich auch eine Version, die es als einen einzelnen Wert darstellt.

function render(data) { 
     data.forEach(function(item) { 
      var templ = $('<div class="album-wrap"> <a class="site" href="' + item.site + '"><img class="coverart" src="' + item.album_cover + '"/></a><h1 class="title">' + item.title + '</h1><h2 class="artist">' + item.artist + '</h2><h2 class="album">' + item.album + '</h2><p class="date">' + item.release_date + '</p><ul class="genres"></ul></div>'), 
       generesLi = templ.find('.genres'); 

      generesRender(item.generes, generesLi); 

      $('body').append(templ); 
     }); 
    } 

    function generesRender(arr, elem) { 
     arr.forEach(function(item) { 
      elem.append('<li>' + item + '</li>'); 
     }); 
    } 
    render(data);

Und das ist, wenn Generes kein Array ist.

function render(data) { 
      data.forEach(function(item) { 
       var templ = $('<div class="album-wrap"> <a class="site" href="' + item.site + '"><img class="coverart" src="' + item.album_cover + '"/></a><h1 class="title">' + item.title + '</h1><h2 class="artist">' + item.artist + '</h2><h2 class="album">' + item.album + '</h2><p class="date">' + item.release_date + '</p><p class="genres">' + item.generes + '</p></div>'); 
       $('body').append(templ); 
      }); 
     }

Ihr getJSON-Anruf ist auch ausgeschaltet. Ich nehme keinen Param (den ich kenne) und du brauchst ihn nicht. Also sollte es so sein.

$.getJSON('my.js', function(data) { 
    render(data); 
});

Ich benutzte JSON, die auf der Seite war. Ich sah so aus.

var data = [{ 
      "title": "Hotel California", 
      "artist": "Eagles", 
      "album": "Hotel California", 
      "album_cover": "https://en.wikipedia.org/wiki/Hotel_California_(Eagles_album)#/media/File:Hotelcalifornia.jpg", 
      "release_date": "1976", 
      "site": "http://www.allmusic.com/album/hotel_california", 
      "generes": ["Rock", "Country", "Electric"] 
     }, { 
      "title": "Back in Black", 
      "artist": "ACDC", 
      "album": "Back in Black", 
      "album_cover": "http://www.billboard.com/files/styles/review_main_image/public/media/acdc-back-in-black-album-cover-650.jpg", 
      "release_date": "1980", 
      "site": "http://www.allmusic.com/album/back_in_black", 
      "generes": ["Rock", "Jazz"] 
     }];

Wenn Ihre Daten so aussehen, sollte die Lösung funktionieren. Wenn es das nicht tut, melde es sich an und poste was du bekommst und ich werde Anpassungen vornehmen.

Quelle

2016-10-11 05:02:38

JSON in HTML umwandeln

Antwort

Verwandte Themen