我有三个单独的JS脚本,它们从三个不同的JSON文件中提取数据。
我在页面顶部声明div并执行脚本。每个文档都使用document.getElementById函数指向不同的div。
它不起作用,我正在努力理解原因。正确解析了3个JSON,但输出堆叠在一起了[[after我在顶部声明的div。
<body onload="op();">
<h2>1</h2>
<div id="myData2"></div>
<h2>2</h2>
<div id="myData"></div>
<h2>3</h2>
<div id="myData3"></div>
<div class="container">
<div class="columns">
<div class="column is-half">
<script>
fetch('top.json')
.then(function (response) {
return response.json();
})
.then(function (data) {
appendData(data);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data) {
var mainContainer1 = document.getElementById("myData");
for (var i = 0; i < data.data.children.length; i++) {
var div = document.createElement("div");
div.innerHTML = data.data.children[i].data.title;
mainContainer1.appendChild(div);
}
}
</script>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-half">
<script>
fetch('top.json')
.then(function (response) {
return response.json();
})
.then(function (data2) {
appendData(data2);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data2) {
var mainContainer2 = document.getElementById("myData2");
for (var i = 0; i < data2.data.children.length; i++) {
var div = document.createElement("div");
div.innerHTML = data2.data.children[i].data.title;
mainContainer2.appendChild(div);
}
}
</script>
</div>
</div>
</div>
</div>
<div class="container">
<div class="columns">
<div class="column is-half">
<script>
fetch('local3.json')
.then(function (response) {
return response.json();
})
.then(function (data2) {
appendData(data2);
})
.catch(function (err) {
console.log('error: ' + err);
});
function appendData(data2) {
var mainContainer3 = document.getElementById("myData3");
for (var i = 0; i < data2.data.children.length; i++) {
var div = document.createElement("div");
div.innerHTML = data2.data.children[i].data.title;
mainContainer3.appendChild(div);
}
}
</script>
</div>
</div>
</div>
.then(function(data) {
appendData(data);
})
由于您的所有函数都具有相同的名称,因此
appendData(data);
将始终调用相同的function
,这是下面的一个:function appendData(data) { var mainContainer1 = document.getElementById("myData"); for (var i = 0; i < data.data.children.length; i++) { var div = document.createElement("div"); div.innerHTML = data.data.children[i].data.title; mainContainer1.appendChild(div); } }
然后您的数据将一如既往地保存在同一位置。因此,为了解决这个问题,
您不必每次都使用不同的函数,然后在
.then
中调用它们,就可以通过在.then
中进行功能性操作来简化此操作> :.then(function(data) { var mainContainer1 = document.getElementById("myData"); for (var i = 0; i < data.data.children.length; i++) { var div = document.createElement("div"); div.innerHTML = data.data.children[i].data.title; mainContainer1.appendChild(div); } })