使用纯 JavaScript 循环遍历 JSON 数据，以填充 HTML 中指定数量的文章

请按照我的解释和问题在下面找到代码：

我正在使用 myjson.com 生成 12 个"结果"。这些"结果"由 12 个客户端组成，所有这些客户端都有不同的关联数据位。例如

客户端 1：名字 - 詹姆斯，

地址 - 1234枫树街

客户端 2：名字 - 杰克，

地址 - 4321 Lorem Ipsum Lane(洛雷姆伊普苏姆巷(

我的问题：如何在 JavaScript 和 Ajax 请求中使用 For 循环在 HTML 中填充以下 12 篇文章？

    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>
    <article>
        <img class="photo" height="100" width="100">
        <hgroup>
            <h1 class="name"></h1>
            <h2 class="email"></h2>
        </hgroup>
    </article>*

`    const Employees = (function () {

let displayStudent = document.querySelector('.photo');
let name = document.querySelector('.name');
let email = document.querySelector('.email');
let phone = document.querySelector('.phone');
let streetAddress = document.querySelector('.streetAddress');
let city = document.querySelector('.city');
let state = document.querySelector('.state');
let zip = document.querySelector('.zip');
const ajaxCall = function () {
    let hr = new XMLHttpRequest();
    let url = 'https://api.myjson.com/bins/zfhmr'; //https://randomuser.me/api/
    // myjson.com
    hr.onreadystatechange = function () {
        if (hr.readyState === 4) { //ajax is complete
            if (hr.status === 200) { //successful network exchange
                let myObj = JSON.parse(hr.responseText);   
                for(let i = 0; i < myObj.length; i++) {
                displayStudent.src = myObj.results[0].picture.large;
                name.innerHTML = myObj.results[0].name.first + " " + myObj.results[0].name.last;
                }
                console.log(myObj[i]);
                /*
                email.innerHTML = myObj.results[0].email;
                phone.innerHTML = myObj.results[0].phone;
                streetAddress.innerHTML = myObj.results[0].location.street;
                city.innerHTML = myObj.results[0].location.city;
                state.innerHTML = myObj.results[0].location.state;
                zip.innerHTML = myObj.results[0].location.postcode;
                */

            }
        } else {
            console.log("ajax error: " + hr.response);
        }
    };
    hr.open("GET", url, true);
    hr.send();
    console.log(hr);

};
return {
    init: function () {
        ajaxCall();
    }
};
}());
Employees.init();    `

我当时只用一个客户端填充多篇文章时遇到问题。任何帮助都非常感谢！

谢谢

当我检查您的JSON响应时，我在您的代码示例中看到了一些奇怪的东西。

您的json响应如下所示...

{
    "results": [...]
}

您的 for 循环如下所示...

let myObj = JSON.parse(hr.responseText);
for(let i = 0; i < myObj.length; i++) {
    displayStudent.src = myObj.results[0].picture.large;
    name.innerHTML = myObj.results[0].name.first + " " + 
    myObj.results[0].name.last;
}

因此，在您的代码中，您尝试循环一个对象(甚至不包含 .length 属性(，在这种情况下myObj不是数组列表。
myObj.results[0]总是返回第一个结果。

溶液

您应该在for循环中动态注入html元素。

<!-- In your HTML file -->
<div id="articleContainer"></div>

// In your javascript ajax response (success)
if (hr.readyState === 4 && hr.status === 200) { // ajax is complete and successful network exchange
    let container = document.querySelector('#articleContainer');
    let strArticles = "";
    let myObj = JSON.parse(hr.responseText);
    for(let i = 0; i < myObj.results.length; i++) {
        let resObj = myObj.results[i];
        strArticles += '<article>' +
                            '<img class="photo" src="' + resObj.picture.large + '" height="100" width="100">' +
                            '<hgroup>' +
                                '<h1 class="name">' + resObj.name.first + ' ' + name.last + '</h1>' +
                                '<h2 class="email">' + resObj.email + '</h2>' +
                            '</hgroup>' +
                        '</article>';
    }
    // Inject the string html into the container parent element.
    container.innerHTML = strArticles;
}

希望这对你有用:)

你的 'i' 变量超出了你的 for 循环的范围，并且不嵌套 if 语句。此外，如果您尝试用数据填充重复的 HTML 片段，您可能需要考虑使用模板并将其吐出，而不是使用选择器查询所有单个元素。

const Employees = (function() {
  let displayStudent = document.querySelector('.photo');
  let name = document.querySelector('.name');
  let email = document.querySelector('.email');
  let phone = document.querySelector('.phone');
  let streetAddress = document.querySelector('.streetAddress');
  let city = document.querySelector('.city');
  let state = document.querySelector('.state');
  let zip = document.querySelector('.zip');
  const ajaxCall = function() {
    let hr = new XMLHttpRequest();
    let url = 'https://api.myjson.com/bins/zfhmr'; //https://randomuser.me/api/
    // myjson.com
    hr.onreadystatechange = function() {
      if (hr.readyState === 4 && hr.status === 200) { //ajax is complete
        //successful network exchange
        let myObj = JSON.parse(hr.responseText);
        for (let i = 0; i < myObj.length; i++) {
          displayStudent.src = myObj.results[0].picture.large;
          name.innerHTML = myObj.results[0].name.first + " " + myObj.results[0].name.last;
          console.log(myObj[i]);
          /*
          email.innerHTML = myObj.results[0].email;
          phone.innerHTML = myObj.results[0].phone;
          streetAddress.innerHTML = myObj.results[0].location.street;
          city.innerHTML = myObj.results[0].location.city;
          state.innerHTML = myObj.results[0].location.state;
          zip.innerHTML = myObj.results[0].location.postcode;
          */
        }
      } else {
        console.log("ajax error: " + hr.response);
      }
    };
    hr.open("GET", url, true);
    hr.send();
    console.log(hr);
  };
  return {
    init: function() {
      ajaxCall();
    }
  };
})();
Employees.init();

<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>
<article>
  <img class="photo" height="100" width="100">
  <hgroup>
    <h1 class="name"></h1>
    <h2 class="email"></h2>
  </hgroup>
</article>

一个扩展将是：

// blah blah blah ajax call blah blah blah fetch, blah blah blah something else that brings me data
//data comes back as something to iter through
var data = [{
  email: 'something'
}, {
  email: 'something2'
}, {
  email: 'blah'
}, {
  email: 'blah2'
}, {
  email: 'blah blah'
}, {
  email: ':o blah'
}]
data.forEach(item => {
  var div = document.createElement('div')
  div.innerHTML = `<div>some fancy box////   ${item.email}   \\\some more facy box</div>`
  document.body.appendChild(div);
})

相关内容

最新更新

热门标签：