// class
class User{
id;
name;
email;
phone;
constructor(userJson){
this.id = userJson.id;
this.name = userJson.name;
this.email = userJson.email;
this.phone = userJson.phone;
}
getUserLi(){
let $li = createTag('li',null);
let $id = createTag('span', this.id);
let $name = createTag('span', this.name);
let $email = createTag('span', this.email);
let $phone = createTag('span', this.phone);
$li.setAttribute('key', this.id);
$id.classList.add('id');
$name.classList.add('name');
$email.classList.add('email');
$phone.classList.add('phone');
$li.appendChild($id);
$li.appendChild($name);
$li.appendChild($email);
$li.appendChild($phone);
return $li;
}
}
// main
$userlist = document.querySelector('#userlist');
getUsersFromServer().then(function(users){
for( let user of users){
$userlist.appendChild(user.getUserLi());
}
});
// function
async function getUsersFromServer(){
const response = await fetch(serverUrl);
try {
if(response.ok){
const userArray = new Array();
let userJsons = await response.json();
for( let userJson of userJsons){
userArray.push(new User(userJson));
}
return userArray;
}else{
new Error('fetch response error');
}
} catch (err) {
console.log(err);
}
}
function createTag(tagName, content){
let $tag = document.createElement(tagName);
$tag.textContent = content;
return $tag;
}
이거 보니까, getUsersFromServer같은거나 아니면 검색 결과 조회같은거 할 때
쿼리를 날리던지 등 url 인자로 받게 해서 아니면 http 메시지 객체로 받게끔 오버로딩 하거나
그렇게 해서 조금 더 유연하게 할 수 있을 듯