Javascript 使用java脚本在ul中显示json_Javascript

Javascript 使用java脚本在ul中显示json

javascript

Javascript 使用java脚本在ul中显示json,javascript,Javascript,我有一个简单的json { "subjectObj": [{ "id": "1", "option": "java" }, { "id": "2", "option": "c++" },{ "id": "3", "option": "c" }] } 我只想将这个json显示为ul。我使用jquery实现了这一点，但我想用java脚本实现 function OnSuccess(data) { $.each(data, function() {

我有一个简单的json

{
 "subjectObj": [{
  "id": "1",
  "option": "java"
 }, {
  "id": "2",
  "option": "c++"
 },{
  "id": "3",
  "option": "c"
}]
}

我只想将这个json显示为

ul

。我使用jquery实现了这一点，但我想用java脚本实现

function OnSuccess(data) {
    $.each(data, function() {
        $("#ulCategory").append("<li>" + this.option + "</li>");
    });
}

<body>
<div id="ulCategory"></div>
</body>

成功时的函数（数据）{ $.each（数据，函数（）{ $（“#ulCategory”）.append（“

”+this.option+”

”）； }); }

如下更改您的函数，您需要在

数据的数组中循环。subjectObj

function OnSuccess(data) {
    $.each(data.subjectObj, function(index) {
    debugger;
        $("#ulCategory").append("<li>" + this.option + "</li>");
    });
}

成功时的函数（数据）{ $.each（data.subjectObj，函数（索引）{ 调试器； $（“#ulCategory”）.append（“

”+this.option+”

”）； }); } 这方面的DOM方式（“纯javascript方式”）是（假设ES5！）：

函数OnSuccess（data）{//假设数据是subjectObj中的数组，否则我们将使用data data.subjectObj作为循环
var ulCategory=document.getElementById（'ulCategory'）；
对于（var i=0；i}

如果您想摆脱jQuery并用普通javascript实现它，您可以尝试以下代码。它创建一个

ul

元素，然后在循环中填充

li

项

function OnSuccess(data) {
    var categoryList = document.getElementById('ulCategory');
    var ulElement = document.createElement("ul");
    categoryList.appendChild(ulElement);

    data.subjectObj.forEach(item => {
        var liElement = document.createElement("li");
        liElement.textContent = item.option;
        ulElement.appendChild(liElement);
    });
}


函数格式（数据）{
如果（数据类型）=“对象”）{
文件。写（“”）；
用于（数据中的var i）{
文件。写（“”+i）；
格式（数据[i]）；
}
文件。写（“”）；
}否则{
文件。写入（'=>'+数据）；
}
}
json={
“subjectObj”：[{
“id”：“1”，
“选项”：“java”
}, {
“id”：“2”，
“选项”：“c++”
}, {
“id”：“3”，
“选项”：“c”
}]
}
格式（json）

您的香草javascript代码是什么样子的？将其转换为香草javascript在哪里遇到问题。无需多次查询DOM来获取id为

ulCategory

的节点。出于性能原因，请执行一次并将其存储在变量中。如何为每个json数据添加

标记？@NicoVanBelle yup-你说得对…将document.getElementById（'ulCategory'）移到顶部…@krish；你想将a作为li的子项添加还是作为替换项添加？替换项将是：document.createElement（'a'）；不，不，我想作为子项添加。。我尝试了这个

listElement.setAttribute（'href'，“www.google.com”）

但它不起作用。如何为每个主题提供不同的

链接
<script>
    function format(data) {
        if (typeof(data) == 'object') {
            document.write('<ul>');
            for (var i in data) {
                document.write('<li>' + i);
                format(data[i]);
            }
            document.write('</ul>');
        } else {
            document.write(' => ' + data);
        }
    }


    json = {
        "subjectObj": [{
            "id": "1",
            "option": "java"
        }, {
            "id": "2",
            "option": "c++"
        }, {
            "id": "3",
            "option": "c"
        }]
    }
    format(json)
</script>