如何创建一个元素以仅使用 javascript 在循环中加载 json 数据

Question

我想像demo节点的子节点元素一样显示剧院，并且在我想仅使用 JavaScript 触发其他 function 的 onclick 事件之后

如何使用 foreach 为 json 数据中的每个数组创建 html dom

我希望它像这样显示

<div id="demo">
  <div>theater in vizag</div>
  <div>sangam : 4K,DolbyAtmos</div>
 <div>sarat : 4K,DolbyAtmos</div>
 <div>melody : 4K,DolbyAtmos</div>
</div>

 let VizagData = '{"theater":[' + '{"TheaterName":"sangam","Quality":"4K","sound":"DolbyAtmos" },' + '{"TheaterName":"sarat","Quality":"4K","sound":"DolbyAtmos" },'+ '{"TheaterName":"melody","Quality":"4K","sound":"DolbyAtmos"}]}'; let VZMData = '{"theater":[' + '{"TheaterName":"Srikanya","Quality":"4K","sound":"DolbyAtmos" },' + '{"TheaterName":"kameswari","Quality":"4K","sound":"DolbyAtmos" },'+ '{"TheaterName":"IMAX","Quality":"4K","sound":"DolbyAtmos"}]}'; function search() { document.getElementById('th').innerHTML = myfunction(); function myfunction() { var value = document.getElementById('ct').value; var th1 = document.createElement('div'); document.getElementById('th').appendChild(th1); th1.innerHTML = "theaters in " + value; return th1.innerHTML; } } function data() { var index = document.getElementById('ct'); var demo = document.getElementById("demo"); if(index.value === "vizag"){ const obj = JSON.parse(VizagData); demo.innerHTML = obj.theater[0].TheaterName + ": " + obj.theater[0].Quality + "," + obj.theater[0].sound + "<br>" + obj.theater[1].TheaterName + ": " + obj.theater[1].Quality + "," + obj.theater[1].sound + "<br>" + obj.theater[2].TheaterName + ": " + obj.theater[2].Quality + "," + obj.theater[2].sound; } else { const obj = JSON.parse(VZMData); demo.innerHTML = obj.theater[0].TheaterName + ": " + obj.theater[0].Quality + "," + obj.theater[0].sound + "<br>" + obj.theater[1].TheaterName + ": " + obj.theater[1].Quality + "," + obj.theater[1].sound + "<br>" + obj.theater[2].TheaterName + ": " + obj.theater[2].Quality + "," + obj.theater[2].sound; } } var go = document.getElementById('go'); addEventListener('click', search); addEventListener('click', data);

 <select id="ct"> <option value="vizianagaram">vizianagaram</option> <option value="vizag">vizag</option> </select> <button id="go">GO</button> <div class="th" id="th"></div> <div id="demo"></div>

Answer 1

迭代数据并构建 innerHTML。 就像是：

 let VizagData = '{"theater":[' + '{"TheaterName":"sangam","Quality":"4K","sound":"DolbyAtmos" },' + '{"TheaterName":"sarat","Quality":"4K","sound":"DolbyAtmos" },'+ '{"TheaterName":"melody","Quality":"4K","sound":"DolbyAtmos"}]}'; let VZMData = '{"theater":[' + '{"TheaterName":"Srikanya","Quality":"4K","sound":"DolbyAtmos" },' + '{"TheaterName":"kameswari","Quality":"4K","sound":"DolbyAtmos" },'+ '{"TheaterName":"IMAX","Quality":"4K","sound":"DolbyAtmos"}]}'; function search() { document.getElementById('th').innerHTML = myfunction(); function myfunction() { var value = document.getElementById('ct').value; var th1 = document.createElement('div'); document.getElementById('th').appendChild(th1); th1.innerHTML = "theaters in " + value; return th1.innerHTML; } } function data() { var index = document.getElementById('ct'); var demo = document.getElementById("demo"); var theatres = JSON.parse(VZMData); if(index.value === "vizag"){ theatres = JSON.parse(VizagData); } var innerHTML = ""; for (var obj of theatres.theater) { innerHTML += "<div>" + obj.TheaterName + ": " + obj.Quality + "," + obj.sound + "</div>"; } demo.innerHTML = innerHTML; } var go = document.getElementById('go'); addEventListener('click', search); addEventListener('click', data);

 <select id="ct"> <option value="vizianagaram">vizianagaram</option> <option value="vizag">vizag</option> </select> <button id="go">GO</button> <div class="th" id="th"></div> <div id="demo"></div>