EntropyStarRover

06. Blog

Feb 26th, 2021 (edited)
407
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function attachEvents() {
  2.     let btnLoadPosts = document.getElementById("btnLoadPosts");
  3.     let btnViewPost = document.getElementById("btnViewPost");
  4.     let sel = document.getElementById("posts");
  5.     let postTitleh = document.getElementById("post-title");
  6.     let postBody = document.getElementById("post-body");
  7.     let commentsUl = document.getElementById("post-comments");
  8.  
  9.     btnLoadPosts.addEventListener("click", loadPosts);
  10.     btnViewPost.addEventListener("click", viewPost);
  11.  
  12.     let postsObj={}
  13.  
  14.     var requestOptions = {
  15.         method: 'GET',
  16.         redirect: 'follow'
  17.     };
  18.  
  19.     function loadPosts() {
  20.         sel.innerHTML = "";
  21.  
  22.         fetch("http://localhost:3030/jsonstore/blog/posts", requestOptions)
  23.             .then(response => response.json())
  24.             .then(result => {populateSelect(result);
  25.             postsObj=Object.assign({},result)})        
  26.             .catch(error => console.log('error', error));
  27.     }
  28.  
  29.     function populateSelect(o) {
  30.         let arrOfPosts = Object.entries(o);
  31.         arrOfPosts.forEach(p => {
  32.             let post = p[1];
  33.             let title = post.title;
  34.             let opt = document.createElement("option");
  35.             opt.value = post.id;
  36.             opt.textContent = title;
  37.             sel.appendChild(opt)
  38.         });
  39.     }
  40.  
  41.     function viewPost() {
  42.         let neededId = sel.options[sel.selectedIndex].value;
  43.         getPostDetails(postsObj,neededId);
  44.  
  45.          //get all coments
  46.         fetch("http://localhost:3030/jsonstore/blog/comments", requestOptions)
  47.             .then(response => response.json())
  48.             .then(result => renderComments(result, neededId))
  49.             .catch(error => console.log('error', error));
  50.     }
  51.  
  52.     function getPostDetails(data, neededId) {
  53.         //get needed post
  54.         let arr = Object.entries(data);
  55.         let post = arr.find(a => a[0] == neededId);
  56.         postTitleh.textContent = "";
  57.         postTitleh.textContent = post[1].title;
  58.         postBody.textContent = post[1].body;
  59.     }
  60.  
  61.     function renderComments(data, neededId) {
  62.         commentsUl.innerHTML = "";
  63.         let arrData = Object.entries(data);    
  64.         //filter comments
  65.         let relevantComments = arrData.filter(a => a[1].postId == neededId);
  66.         relevantComments.forEach(c => {
  67.             let comLi = document.createElement("li");
  68.             comLi.id = c.id;
  69.             comLi.textContent = c[1].text;
  70.             commentsUl.appendChild(comLi)
  71.         })
  72.     }
  73. }
  74.  
  75.  
  76. attachEvents();
RAW Paste Data