在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Java  HTML/ 怎么把json數(shù)組加到DOM節(jié)點中并輸出到頁面？

怎么把json數(shù)組加到DOM節(jié)點中并輸出到頁面？

如果是下面這個單個json對象是可以的

<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>
<button onclick="load()">加載</button>

<script>
var para=document.createElement("p");
var json={'name':'abc'};
var node=document.createTextNode(json.name);
para.appendChild(node);
function load() {
    var element=document.getElementById("div1");
    element.appendChild(para);
}

</script>

當(dāng)我點擊“加載”的時候，html頁面就會顯示abc

但是我想顯示更多數(shù)據(jù)，我把json寫成了數(shù)組

<div id="div1">
<p id="p1">這是一個段落</p>
<p id="p2">這是另一個段落</p>
</div>
<button onclick="load()">加載</button>

<script>
var para=document.createElement("p");
var json=[
{'name':'111'},
{'name':'222'},
{'name':'333'},
{'name':'444'},
{'name':'555'}
];
var node=document.createTextNode(json.name);
para.appendChild(node);
function load() {
    var element=document.getElementById("div1");
    element.appendChild(para);
}

</script>

點擊“加載”
只顯示undefined

回答
編輯回答
枕頭人

json根本就沒有name這個屬性了啊，肯定是undefined.

2017年8月20日 05:26
編輯回答
心悲涼

數(shù)組使用的是index(0 based)，語法是json[index]，如果要訪問第一個對象的name屬性，應(yīng)該是json[0].name，建議題主補(bǔ)充學(xué)習(xí)下js的基礎(chǔ)語法知識

2017年9月4日 21:05
編輯回答
怣人

用循環(huán)就可以做到，題主缺乏js基礎(chǔ)知識

2018年8月28日 00:39
編輯回答
瘋子范

用循環(huán)遍歷一下 json 數(shù)組，逐個添加吧。

2017年1月29日 05:00
編輯回答
冷眸

題主缺乏js基礎(chǔ)知識

var node=document.createTextNode(json.name);//這里就寫錯了 json是一個數(shù)組??！

將上面這行改成

var node=document.createTextNode(JSON.stringify(json));
2017年8月8日 08:47
編輯回答
孤島
var json=[
{'name':'111'},
{'name':'222'},
{'name':'333'},
{'name':'444'},
{'name':'555'}
];

function genTextNodes(json) {
    var para=document.createElement("p");
    // 要展開數(shù)組
    for (var i = 0; i < json.length; i++) {
        var node = document.createTextNode(json[i].name);
        para.appendChild(node);
    }
    return para;
}

function load() {
    var element = document.getElementById("div1");
    // 這一步清空子元素，但是太過粗暴，你可以用 jq 的 removeAll()。
    element.innerHTML = '';
    element.appendChild(genTextNodes(json));
}
2018年1月25日 19:26