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() func添加内容？

Answer 1

我会认真研究像json2html这样的模板引擎（专门用于将json转换为html）以获取jquery。使生命比尝试编写自己的方法从源json对象构建html更容易。

请注意，我将List从字符串数组更改为对象（使其更易于访问）

<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（“selector”）相同。每个都有参数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');

如何获取JSON并在HTML中使用无序列表显示它？

5 个答案:

写少量代码