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

我有一个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>

$（“输入[name=loadmyJson]”。单击（函数（）{//on按钮单击
var项目=[]；
var myJ=${json}；//我在控制器中创建的json元素
var myVar=myJ.parseJSON（）；
$。每个（数据、函数（myVar）{
items.push（“
”+myVar.List+”
）；
});
$（'#myList'）.append（items.join（''）；//myList是我无序列表的id。
)};

编辑：是否需要为

parseJSON（）

func添加内容？

关于：

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.
)};

还必须替换为：

var myVar = jQuery.parseJSON(myJ);

---

很抱歉没有看到它：）

您想在对象上的

列表

数组中循环

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

var myVar=myJ.parseJSON（）；
$.each（myVar.List，函数（index，el）{
物品。推送（“
”+el+”
）；
});

您可以直接添加它，例如：

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

var parent=$（“#myList”）；
$.each（myJ.parseJSON（）.List，function（））{
$（“
”）html（this.appendTo（父级）；
});

少写代码 这里有一些HTML

它将像这样呈现JSON

{
“fID”：“002020243123”，
“姓名”：“约翰·多伊”，
“名单”：[
“父亲”，
“兄弟”，
“表弟”
]
}

最后，你可以使用类似的东西使它看起来漂亮

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

我会认真研究jquery的模板引擎（专门将json转换为html）。这比尝试编写自己的方法从源json对象构建html要容易得多

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


var-json=
{
“fID”：“002020243123”，
“姓名”：“约翰·多伊”，
“列表”：[{标签：“父亲”}，{标签：“兄弟”}，{标签：“表亲”}]
};
var transform={tag:'span'，html:'.label'}；
$（'#list'）.json2html（json.list，transform）；
您是否错过了
标签？否则，如果您确定myVar包含JSON对象，那么它似乎是正确的。您的问题是什么？看起来是个合理的方法。哪里出错了？数据变量是什么？？jQuery.each获取您的数组/对象并运行它，将返回的
参数（key，value）
抛出到您的回调函数中。请看：实际上什么都没有发生，我放了
标记，我想@AndreasAL有道理，让我试试建议的答案。实际上，从Firebug中查找@Masiar后，myJ包含json字符串，但是在parseJSON阶段，我想可能有什么地方出错了，我不确定myVar是否真的有解析过的JSOND使用
这个
而不是第二个参数有意义吗？通常人们在jQuery（selector）中对DOM元素使用它（…@AndreasAL-我认为两者都是等价的。我在这里使用了这个参数，这样我就可以省略函数的参数。如果OP正在连接事件，并且需要回调中的当前项，那么肯定需要第二个参数，因为
这个
将改变回调中的含义。但在这里，我只是觉得它稍微精简了一点/cleaneri这是一个理解的问题。之前人们常说，
这（在jQuery上下文中）是一个DOM元素，我们需要用
$（）
来包装，这就是为什么在使用变量时可能会产生误导。（尤其是在
jQuery中。每个
都与
jQuery（..）非常相似。每个
）：）@AndreasAL-你说得对。这可能会让初学者感到困惑。我更新了每个函数的索引和元素参数。谢谢：）你是说
value
。。我没有尝试这个，但仍然没有尝试，我猜parseJSON函数中有错误，你确定它是字符串吗？尝试将行更改为
var myVar=myJ也许你已经在处理一个对象了。？我确信它是字符串。我是否需要为parseJSON func添加一些内容？js文件还是其他？
$('pre').snippet('javascript');

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