html로 json 데이터를 표시하는 것은 복잡하지 않습니다

Question

이제 거의 모든 비슷한 질문을 검색했지만 모두가 나를 위해 너무 복잡한 문제를 다루었습니다. 그렇지 않으면 사람들이 이러한 질문을하는 데 필요한 모든 것을 필요로하지 않았습니다. 나는 설명에 열중하고 있었다 테이블처럼 내가

추측에 나는, 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 함수를 시도했지만 제대로 사용하는 방법을 알지 못한다고 생각합니다. 도움을 주셔서 감사합니다

Answer 1

여기가 출발점입니다.

JSON.parse()을 사용하여 json 문자열 (예상되는 경우 getJSON)을 파싱합니다. 이렇게하면 HTML 표를 가져 오는 데 사용할 수있는 객체가 제공됩니다. 다음과 같이

HTML

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

자바 스크립트

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