时间戳

首页 > 解决方案 > JSON & Javascript - 动态 DOM 操作

javascript - JSON & Javascript - 动态 DOM 操作

问题描述

我正在学习 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"
    ]
  }
 ]
}

标签： javascriptarraysjson

解决方案

尝试使用 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;
});

推荐阅读