如何獲取JSON並以HTML中的無序列表顯示它？

Question

我有看起來像的JSON：

{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": ["Father", "Brother", "Cousin"]
}

我正在從模型中渲染此JSON元素，並且在html內，我可以簡單地看到JSON的內容。 但是，當我嘗試在腳本中執行此操作時，它什么也不做。

我想做的是獲取List屬性，並在HTML的無序列表中顯示它。

這是我到目前為止嘗試過的：

<script>
    $("input[name=loadmyJson]").click(function() {//on button click
        var items = [];
        var myJ = ${json}; //Json element i created in my controller
        var myVar = myJ.parseJSON();
        $.each(data, function(myVar) {
        items.push('<li>' + myVar.List + '</li>');
        });
        $('#myList').append( items.join('') );//myList is my unordered list's id.
    )};
</script>

編輯：我需要為parseJSON()函數添加一些東西嗎？

Answer 1

我會認真研究jquery的模板引擎，例如json2html （專門將json轉換為html）。 比起嘗試編寫自己的方法以從源json對象構建html而言，使生活容易得多。

請注意，我將列表從字符串數組改為對象（使其更易於訪問）

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://json2html.com/js/jquery.json2html-2.3-min.js"></script>

<div id='list'></div>

<script>
var json =
{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": [{label:"Father"}, {label:"Brother"},{label:"Cousin"}]
};
var transform = {tag:'span',html:'.label'};

$('#list').json2html(json.List, transform);
</script>

Answer 2

關於什么：

var myVar = myJ.parseJSON();
$.each(myVar.List, function(key, value) {
        items.push('<li>' + value + '</li>');
    });
    $('#myList').append( items.join('') );//myList is my unordered list's id.
)};

??

如我的評論中所述，jQuery.each具有參數key和value 。 變量this是等於值（ arguments[1]

相同的jQuery（“選擇”）。每個具有參數key和element ，其中所述可變this等於element （ arguments[1]

好的：

var myVar = myJ.parseJSON();

還必須替換為：

var myVar = jQuery.parseJSON(myJ);

抱歉，沒有看到它:)

Answer 3

您想遍歷對象上的List數組。

var myVar = myJ.parseJSON();
$.each(myVar.List, function(index, el) {
    items.push('<li>' + el + '</li>');
});

Answer 4

您可以直接將其添加，例如：

var parent = $("#myList");
$.each(myJ.parseJSON().List, function() {
    $("<li></li>").html(this).appendTo(parent);
});

Answer 5

寫更少的代碼

這是一些HTML

<pre></pre>

然后這段JavaScript

$('pre').text( JSON.stringify(mJ, null, "\t") );

它將像這樣呈現您的JSON

{
    "fID": "00202020243123",
    "name": "John Doe",
    "List": [
        "Father",
        "Brother",
        "Cousin"
    ]
}

最后，您可以使用類似jQuery Snippet的外觀使其漂亮

$('pre').snippet('javascript');