javascript - JSON和Javascript-动态DOM操作

原文 标签 javascript arrays json

我正在学习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]中放入数字来静态更新“ motto”;但是,我想做这样的事情:

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/

相关文章:

c++ - C++模板参数T(*)[]

javascript - IE7 Javascript 和使用字符串作为数组

java - 使用 Jackson ObjectMapper 将 Json 的一部分转换为 HashMap

javascript - 如何在没有jQuery的情况下检查选择字段是否具有特定选项值

javascript - 为什么此onclick事件在我的脚本中不起作用?

javascript - Javascript,检查数组和周围的节点

javascript - 查找.click函数的类

java - Google AppEngine:基本的Spring MVC 4 REST + JSON适用于开发人员,但不适用于产品

javascript - 如何使用onclick调用功能并单击1次即可在iframe/视频代码中播放视频?

javascript - 自动填充Google Places API不显示任何内容