我正在学习 JSON 和 DOM 操作。我一直在尝试让 HTML 代码动态更新 JSON 文件中的信息。
<div class="towns">
<div class="franklin">
<h3 class="town-title">Franklin</h3>
<p class="f-motto">ssd</p>
<p class="f-year">1232</p>
<p class="f-pop">123123123</p>
<p class="f-rain">1213</p>
</div>
<div class="greenville">
<h3 class="town-title">Greenville</h3>
<p class="g-motto">ssd</p>
<p class="g-year">1232</p>
<p class="g-pop">123123123</p>
<p class="g-rain">1213</p>
</div>
<div class="springfield">
<h3 class="town-title">Springfield</h3>
<p class="s-motto">ssd</p>
<p class="s-year">1232</p>
<p class="s-pop">123123123</p>
<p class="s-rain">1213</p>
</div>
</div>
这是我用来检索数据并更新 DOM 的 Javascript。
<script>
var requestURL = 'https://byui-cit230.github.io/weather/data/towndata.json';
var request = new XMLHttpRequest();
request.open('GET', requestURL);
request.responseType = 'json';
request.send();
request.onload = function() {
var stats = request.response;
populateHeader(stats);
showHeroes(stats);
}
function populateHeader (jsonOBJ) {
var motto = jsonOBJ['towns'][0]['motto'];
document.querySelector('.f-motto').innerHTML = motto;
}
</script>
到目前为止,我知道我可以通过在 jsonOBJ['towns'][number] 中输入一个数字来静态更新“座右铭”;但是,我想做这样的事情:
var n = 0;
var motto = jsonOBJ['towns'][n]['motto'];
并将所有类设置为 .motto 而不是 .__-motto
我尝试使用 for 循环来动态更改变量“n”;但是,我只在所有三个要素上得到了相同的座右铭。任何帮助都是极好的。
谢谢!
json 代码:
{
"towns" : [
{
"name": "Franklin",
"motto": "Where you will grow!",
"yearFounded": 1788,
"currentPopulation": 30458,
"averageRainfall": 21,
"events" : [
"March 4: March to the Drum of Donuts",
"September 5 - 11: Founder Days",
"December 1 - 26: Christmas in the Heart"
]
},
{
"name": "Greenville",
"motto": "Green is our way of life.",
"yearFounded": 1805,
"currentPopulation": 33458,
"averageRainfall": 25,
"events" : [
"February 10-12: Greenbration",
"May 8 - 18: Greenville Founder Days",
"June 20: Verde and Valiant Day",
"November 15-16: Greensome Gathering"
]
},
{
"name": "Placerton",
"motto": "Positive Placement in Placerton.",
"yearFounded": 1946,
"currentPopulation": 512,
"averageRainfall": 39,
"events" : [
"July 4: A Blaze of Glory",
"October 20: Fall through Fall"
]
},
{
"name": "Springfield",
"motto": "Where everyone is lifted.",
"yearFounded": 1826,
"currentPopulation": 17852,
"averageRainfall": 17,
"events" : [
"January 8: Spring into Winter",
"April 10-20: Celebration of Life",
"July 31-Aug 15: Dog Days of Summer Festival"
]
}
]
}
最佳答案
尝试使用 forEach 来获取您的 n
。
//use querySelectorAll to get all the html elements in one go
var mottos = document.querySelectorAll('.f-motto');
//forEach passes in each element and it's index for each iteration
jsonOBJ['towns'].forEach(function(town, index){
mottos[index].innerHTML = town.motto;
});
关于javascript - JSON 和 Javascript - 动态 DOM 操作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50995742/