2017-01-07 11 views
0

ここではほとんどすべての類似した質問を検索しましたが、それらのすべてが私にとっては複雑すぎる問題に触れていました。私が説明に失われてしまった テーブルのように、私はhtmlのjsonデータを表示しないでください

を推測するに、私は、JSONファイルからデータを表示したいこれは私のJSONファイルで、

{ 
    "main_element": { 
     "Burzum_albums": { 
      "album": [ 
       { 
        "name": { 
         "_english_translation": "Darkness", 
         "__text": "Burzum" 
        }, 
        "year": { 
         "_month": "March", 
         "__text": "1992" 
        }, 
        "genre": "Black metal", 
        "label": { 
         "_producer": "Pytten", 
         "__text": "Deathlike Silence Productions" 
        }, 
        "songs_number": { 
         "_length": "46:07", 
         "__text": "9" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "What once was", 
         "__text": "Det som engang var" 
        }, 
        "year": { 
         "_month": "August", 
         "__text": "1993" 
        }, 
        "genre": "Black metal", 
        "label": { 
         "_producer": "Pytten", 
         "__text": "Cymophane" 
        }, 
        "songs_number": { 
         "_length": "40:01", 
         "__text": "8" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "If the light takes us", 
         "__text": "Hvis lyset tar oss" 
        }, 
        "year": { 
         "_month": "April", 
         "__text": "1994" 
        }, 
        "genre": "Black metal", 
        "label": { 
         "_producer": "Pytten", 
         "__text": "Misantrophy Records" 
        }, 
        "songs_number": { 
         "_length": "44:27", 
         "__text": "4" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "Philosopheme", 
         "__text": "Filosofem" 
        }, 
        "year": { 
         "_month": "January", 
         "__text": "1996" 
        }, 
        "genre": "Black metal", 
        "label": { 
         "_producer": "Varg Vikernes", 
         "__text": "Misantrophy Records" 
        }, 
        "songs_number": { 
         "_length": "64:34", 
         "__text": "6" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "Baldr's Death", 
         "__text": "Dauði Baldrs" 
        }, 
        "year": { 
         "_month": "October", 
         "__text": "1997" 
        }, 
        "genre": "Dark ambient", 
        "label": { 
         "_producer": "Varg Vikernes", 
         "__text": "Misantrophy Records" 
        }, 
        "songs_number": { 
         "_length": "39:10", 
         "__text": "6" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "The high seat of Odin", 
         "__text": "Hliðskjálf" 
        }, 
        "year": { 
         "_month": "April", 
         "__text": "1999" 
        }, 
        "genre": "Ambient/neofolk", 
        "label": { 
         "_producer": "Varg Vikernes", 
         "__text": "Misantrophy Records" 
        }, 
        "songs_number": { 
         "_length": "33:42", 
         "__text": "8" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "A Proto-Indo-European deity", 
         "__text": "Belus" 
        }, 
        "year": { 
         "_month": "March", 
         "__text": "2010" 
        }, 
        "genre": "Black metal", 
        "label": { 
         "_producer": "Pytten", 
         "__text": "Byelobog" 
        }, 
        "songs_number": { 
         "_length": "52:16", 
         "__text": "8" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "Fallen", 
         "__text": "Fallen" 
        }, 
        "year": { 
         "_month": "March", 
         "__text": "2011" 
        }, 
        "genre": "Black metal", 
        "label": { 
         "_producer": "Varg Vikernes", 
         "__text": "Byelobog productions" 
        }, 
        "songs_number": { 
         "_length": "47:41", 
         "__text": "7" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "Methamorphosis", 
         "__text": "Umskiptar" 
        }, 
        "year": { 
         "_month": "May", 
         "__text": "2012" 
        }, 
        "genre": "Viking metal", 
        "label": { 
         "_producer": "Varg Vikernes, Pytten", 
         "__text": "Byelobog productions" 
        }, 
        "songs_number": { 
         "_length": "66:16", 
         "__text": "11" 
        } 
       }, 
       { 
        "name": { 
         "_english_translation": "East of the Sun, West of the Moon", 
         "__text": "Sôl austan, Mâni vestan" 
        }, 
        "year": { 
         "_month": "May", 
         "__text": "2013" 
        }, 
        "genre": "Ambient, electronic", 
        "label": { 
         "_producer": "Varg Vikernes", 
         "__text": "Byelobog productions" 
        }, 
        "songs_number": { 
         "_length": "58:12", 
         "__text": "11" 
        } 
       } 
      ] 
     } 
    } 
} 

albums.json私はどのように知っていますもちろん、基本的なHTMLページを作成しますが、mからデータを表示する方法がわからないときy jsonファイル。私はこの$.getJSON関数を試しましたが、正しく使用する方法はわかりません。助けてくれてありがとう

答えて

0

ここは出発点です。

JSON.parse()でjson文字列(おそらくgetJSONにある)を解析します。これは、HTMLテーブルをフェッチするために使用できるオブジェクトを提供します。次のように:

HTML

<table id='albums'> 
<tr><th>Name</th><th>Year</th><th>Genre</th></tr> 
</table> 

Javascriptを

// Parse the json string 
var parsed = JSON.parse(jsonString); 

// Now, say you want to put Burzum_albums albums in the table 
var table = document.getElementById('albums'); 
var albums = parsed["main_element"]["Burzum_albums"]["album"]; 
for (var i = 0 ; i < albums.length ; i++) { 
    table.innerHTML += '<tr>' + 
    '<td>' + albums[i]["name"]["__text"] + '</td>' + 
    '<td>' + albums[i]["year"]["__text"] + '</td>' + 
    '<td>' + albums[i]["genre"] + '</td>' + 
'</tr>'; 
} 

JSFIDDLE DEMO

関連する問題