-1
で記事の指定された数を埋めるために、純粋なJavaScriptでJSONデータをループ私の説明や質問に、次の次のコードを見つけてください：はHTML
私は12「結果」を生成するmyjson.comを使用しています。これらの「結果」は、12のクライアントで構成され、それぞれに異なるデータビットが関連付けられています。例えば、
クライアント1： 姓 - ジェームズ、
住所 - 1234メープルストリート
クライアント2： 姓 - ジャック、
住所 - 4321 Loremのイプサムレーン
私の質問： JavaScriptとAjaxリクエストでForループを使用して、JSONデータで次の12個の記事をHTMLに埋め込むにはどうすればよいですか？
<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(); `
当時は1つのクライアントに1つ以上の記事を設定するのに問題があります。どんな助けでも大歓迎です！
は
あなたは2つのクライアントの行を持っていて、1つのクライアントとの最初の12件の記事を移入したいし、他のまたは6とと1つのクライアントと6つのクライアント？ –