let request = obj => { return new Promise((resolve, reject) => { let xhr = new XMLHttpRequest(); xhr.open(obj.method || "GET", obj.url); if (obj.headers) { Object.keys(obj.headers).forEach(key => { xhr.setRequestHeader(key, obj.headers[key]); }); } xhr.onload = () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(xhr.response); } else { reject(xhr.statusText); } }; xhr.onerror = () => reject(xhr.statusText); xhr.send(obj.body); }); }; request({url: "employees.json"}) .then(data => { let employees = JSON.parse(data); let html = ""; employees.forEach(employee => { html += ` <div> <img src='${employee.picture}'/> <div> ${employee.firstName} ${employee.lastName} <p>${employee.phone}</p> </div> </div>`; }); document.getElementById("list").innerHTML = html; }) .catch(error => { console.log(error); });
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter