Advertisement
EntropyStarRover

02. Phonebook

Mar 1st, 2021
391
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();
Advertisement
RAW Paste Data Copied
Advertisement