在html中显示json数据并不复杂

时间:2017-01-07 12:17:54

标签: html json

现在我在这里搜索了几乎所有类似的问题,但是所有这些问题都触及了对我来说过于复杂的问题,换句话说,我不需要所有人都在问这些问题所需的东西,所以我迷失在解释中 我想显示json文件中的数据,就像我猜的那样

这是我的JSON文件, albums.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"
                    }
                }
            ]
        }
    }
}

现在我知道如何创建基本的html页面,但当我不知道如何显示我的json文件中的数据时。我尝试了这个$.getJSON函数,但我认为我不知道如何正确使用它。谢谢你的帮助

1 个答案:

答案 0 :(得分:0)

这是一个起点。

使用getJSON解析json字符串(您可能在JSON.parse()中获得)。这为您提供了一个可用于获取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