// const button = document.getElementById("addBtn");
// const namelists = document.getElementById("lists");
// button.addEventListener("click", async function(){
// //この辺はデータのやり取り
// const res = await fetch("https://jsonplaceholder.typicode.com/users");
// const users = await res.json(); /*実際のユーザーのJSONデータを users にいれる*/
// console.log(users);
// //リストに追加する処理 DOM操作
// users.forEach(function(user){ //for分で繰り返し
// const list = document.createElement("li"); //HTML要素を作成できるメソッド(今回はli要素を作成。divとかも作れる)
// list.innerText =user.name+"\n"+user.email+"\n"+user.address.zipcode; //userの名前とメルアド ”\n"はただ改行入れただけ
// namelists.appendChild(list); //listのテキストをhtmlのliに追加する処理
// console.log(user.email);
// });
// // //forで書換えたとき リストに追加する処理 DOM操作
// // for (let index = 0; index < users.length; index++) {
// // const user = users[index];
// // const list = document.createElement("li"); //HTML要素を作成できるメソッド(今回はli要素を作成。divとかも作れる)
// // list.innerText =user.name+"\n"+user.email+"\n"+user.address.zipcode; //userの名前とメルアド ”\n"はただ改行入れただけ
// // namelists.appendChild(list); //listのテキストをhtmlのliに追加する処理
// // console.log(user.email);
// // }
// });
// //windowを読み込んだときに、listを取得する
// window.addEventListener("load", async function(){
// //この辺はデータのやり取り
// const res = await fetch("https://jsonplaceholder.typicode.com/users");
// const users = await res.json(); /*実際のユーザーのJSONデータを users にいれる*/
// console.log(users);
// //リストに追加する処理 DOM操作
// users.forEach(function(user){ //for分で繰り返し
// const list = document.createElement("li"); //HTML要素を作成できるメソッド(今回はli要素を作成。divとかも作れる)
// list.innerText =user.name+"\n"+user.email+"\n"+user.address.zipcode; //userの名前とメルアド ”\n"はただ改行入れただけ
// namelists.appendChild(list); //listのテキストをhtmlのliに追加する処理
// console.log(user.email);
// });
// });
//リファクタリング
const button = document.getElementById("addBtn");
const namelists = document.getElementById("lists");
//メソッド
function addList(user){ //for分で繰り返し
const list = document.createElement("li"); //HTML要素を作成できるメソッド(今回はli要素を作成。divとかも作れる)
list.innerText =user.name+"\n"+user.email+"\n"+user.address.zipcode; //userの名前とメルアド ”\n"はただ改行入れただけ
namelists.appendChild(list); //listのテキストをhtmlのliに追加する処理
console.log(user.email);
}
//メソッド
async function getUsers(){
//この辺はデータのやり取り
const res = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await res.json(); /*実際のユーザーのJSONデータを users にいれる*/
return users;
console.log(users);
}
async function listUsers(){
const users = await getUsers();
users.forEach(addList); //リストに追加する処理 DOM操作
}
//イベント
window.addEventListener("load",listUsers);
button.addEventListener("click",listUsers);
