JSONをHTMLに変換する

私は、jquery関数を使用して特定のhtml idsに移動したい曲のリストを持つjsonファイルを持っています。ここに私のJSONファイル内5曲の2（すべて同じ形式に従っている：ここではJSONをHTMLに変換する

{ 
    "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" 
     } 
    ] 
}

は、私は自分のデータがにロードされていしようとしています私のhtmlです：

<!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>

私がしようとしています。

$("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); 
    }) 
    }); 
}

するすべてのヘルプは、次のようになります。適切なデータとこれらのタグを満たし、すべての曲は、ちょうど繰り返し上記HTML形式に成形されるまで処理を繰り返し関数を作成するためにここに、これまでの私のjsファイルがありますグレありがとう！

出典

2016-10-10 Jack

簡単なこと：JSONファイルの名前が 'lab4'の場合、getJSON呼び出しでは' lab4.json'にします。また、コンソールエラーが発生していますか？ –

JSONをHTMLにどのように表示するかは不明です。 JSONには一連のソングが含まれていますが、HTML内には1つのソングの場所しかありません。どの曲をHTMLに入れるべきですか？ – Barmar

なぜ 'genres'はHTMLのリストですが、JSONの単一の文字列ですか？ ["Rock"、 "Punk"] ' – Barmar

したがって、曲のリストと詳細を含むJSONファイルを取得しています。あなたが提供したタラの狙撃虫に基づいてこれを思いついた。

データを入力するHTMLテンプレートを整理する必要があります。これを行うには、IDの代わりにクラスを使用する必要があります。私はforEachループを使って全ての曲を読み込んでいました。

あなたの遺伝子を配列に変更しました。もしそれがそうであるならば。そうでなければ、私は単一の値としてレンダリングするバージョンも持っています。

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);

これは、generesが配列でない場合です。

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); 
      }); 
     }

getJSONコールもオフです。私はparam（私が知っている）を取っておらず、あなたはそれを必要としません。だからそれはこのようにすべきです。

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

私はページ上にあったJSONを使用しました。私はこのように見えた。

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"] 
     }];

データがこのように見える場合、解決策は機能するはずです。それがコンソールではない場合は、それを記録し、あなたが得るものを投稿して、私は調整を行います。

出典

2016-10-11 05:02:38

答えて

関連する問題