Java脚本未在正确的Div中输出

问题描述 投票:-1回答:1

我有三个单独的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>
javascript html json
1个回答
1
投票
这里的问题在于此行下:

.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); } })
© www.soinside.com 2019 - 2024. All rights reserved.