EntropyStarRover

02. Phonebook

Mar 1st, 2021
339
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     let phoneUl = document.getElementById("phonebook");
  3.     let loadBtn = document.getElementById("btnLoad");
  4.     let nameInput = document.getElementById("person");
  5.     let numberInput = document.getElementById("phone");
  6.     let createBtn = document.getElementById("btnCreate");
  7.  
  8.     loadBtn.addEventListener("click", loadRecords);
  9.     createBtn.addEventListener("click", submitRecord);
  10.  
  11.     function loadRecords() {
  12.  
  13.         let myHeaders = new Headers();
  14.         myHeaders.append("Content-Type", "application/json");
  15.  
  16.         let requestOptions = {
  17.             method: 'GET',
  18.             headers: myHeaders,
  19.             redirect: 'follow'
  20.         };
  21.  
  22.         fetch("http://localhost:3030/jsonstore/phonebook", requestOptions)
  23.             .then(response => response.json())
  24.             .then(result => renderRecords(result))
  25.             .catch(error => console.log('error', error));
  26.     }
  27.  
  28.  
  29.     function renderRecords(result) {
  30.         phoneUl.innerHTML = "";
  31.         let recordsArr = Object.entries(result);
  32.         //if response is empty obj
  33.         if (recordsArr.length==0){
  34.             phoneUl.textContent="No records available!"
  35.         } else {
  36.         recordsArr.forEach(r => {
  37.            createSingleRecord(r[0],r[1].person, r[1].phone)
  38.         });
  39.  
  40.     }
  41.     }
  42.  
  43.     function createSingleRecord(rId,rName, rPhone){
  44.         let recordLi = document.createElement("li");
  45.             recordLi.id = rId;
  46.             recordLi.textContent = `${rName}: ${rPhone}`;
  47.             let delBtn = document.createElement("button");
  48.             delBtn.textContent = "Delete";
  49.             delBtn.addEventListener("click", () => (deleteRecord(recordLi)));
  50.             recordLi.appendChild(delBtn);
  51.             phoneUl.appendChild(recordLi);
  52.     }
  53.  
  54.     function deleteRecord(recordLi) {
  55.         let myHeaders = new Headers();
  56.         myHeaders.append("Content-Type", "application/json");
  57.  
  58.        let requestOptions = {
  59.             method: 'DELETE',
  60.             headers: myHeaders,
  61.             redirect: 'follow'
  62.         };
  63.  
  64.         fetch(`http://localhost:3030/jsonstore/phonebook/${recordLi.id}`, requestOptions)
  65.             .then(response => response.text())
  66.             //remove li after record is deleted, no need to make new request
  67.             .then(result => recordLi.remove())
  68.             .catch(error => phoneUl.textContent = "No records available!");
  69.     }
  70.  
  71.     function submitRecord() {
  72.         let name = nameInput.value;
  73.         let phone = numberInput.value;
  74.  
  75.         let myHeaders = new Headers();
  76.         myHeaders.append("Content-Type", "application/json");
  77.  
  78.        let raw = JSON.stringify({ "person": name, "phone": phone });
  79.  
  80.        let requestOptions = {
  81.             method: 'POST',
  82.             headers: myHeaders,
  83.             body: raw,
  84.             redirect: 'follow'
  85.         };
  86.  
  87.         fetch("http://localhost:3030/jsonstore/phonebook", requestOptions)
  88.             .then(response => response.json())
  89.             //refresh right away
  90.             .then(result => loadRecords())
  91.             .catch(error => console.log('error', error));
  92.  
  93.             nameInput.value="";
  94.             numberInput.value="";
  95.     }
  96. }
  97.  
  98. attachEvents();
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×