diff options
Diffstat (limited to 'usth/ICT3.2/prac/5/2.js')
-rw-r--r-- | usth/ICT3.2/prac/5/2.js | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/usth/ICT3.2/prac/5/2.js b/usth/ICT3.2/prac/5/2.js new file mode 100644 index 0000000..0496943 --- /dev/null +++ b/usth/ICT3.2/prac/5/2.js @@ -0,0 +1,63 @@ +const BASE = `https://dummyapi.io/data/api/` + +function get_collection(collection) { + let request = new XMLHttpRequest(); + request.open('GET', `${BASE}${collection}`); + request.setRequestHeader('app-id', '5f76987a523f015e7c5ae49b'); + request.onload = function () { + let prefix = collection.includes('/') ? '' : `<h1>${collection}s</h1>`; + document.getElementById(collection).innerHTML = ( + prefix + JSON.parse(request.response).data.map( + function (member) { + let c = collection.slice(-4); + let id = member.id; + if (c == 'post') + id += '/comment'; + + let call = `"get_member('${c}', '${id}')"`; + if (c == 'post') + return `<button onclick=${call}/>${member.text}</button> + <div id=${id}></div>`; + + let repr = `${member.firstName} ${member.lastName}`; + return `<div id=${id}> + <button onclick=${call}/>${repr}</button> + </div>`; + }).join("\n")); + } + request.send(); +} + +function user_format(r) { + let l = r.location; + return `<h2>${r.title} ${r.firstName} ${r.lastName}</h2> + <div id='user/${r.id}/post'> + <button onclick="get_collection('user/${r.id}/post')"> + List posts + </button> + </div> + <p>gender: ${r.gender}</p> + <p>email: ${r.email}</p> + <p>date of birth: ${r.dateOfBirth}</p> + <p>register date: ${r.registerDate}</p> + <p>phone: ${r.phone}</p> + <p>picture: ${r.picture}</p> + <p>location: ${l.street}, ${l.city}, ${l.state}, ${l.country}</p>` +} + +function post_format(r) { + return r.data.map(comment => `<p>${comment.message}</p>`).join("\n"); +} + +function get_member(collection, member) { + let request = new XMLHttpRequest(); + console.log(`${BASE}${collection}/${member}`); + request.open('GET', `${BASE}${collection}/${member}`); + request.setRequestHeader('app-id', '5f76987a523f015e7c5ae49b'); + request.onload = function () { + let format = collection == 'user' ? user_format : post_format; + document.getElementById(member).innerHTML = format( + JSON.parse(request.response)); + } + request.send(); +} |