Advertisement
EntropyStarRover

04.Table search 2

Mar 12th, 2021
62
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {
  2. html,
  3. render
  4. } from 'https://unpkg.com/lit-html?module';
  5.  
  6. function solve() {
  7. let cached = [];
  8. document.querySelector('#searchBtn').addEventListener('click', onClick);
  9. let inputField = document.getElementById("searchField")
  10.  
  11. let tbody = document.querySelector("tbody");
  12. console.log(tbody)
  13.  
  14. //get data
  15. let myHeaders = new Headers();
  16. myHeaders.append("Content-Type", "application/json");
  17.  
  18. let requestOptions = {
  19. method: 'GET',
  20. headers: myHeaders,
  21. redirect: 'follow'
  22. };
  23.  
  24. fetch("http://localhost:3030/jsonstore/advanced/table", requestOptions)
  25. .then(response => response.json())
  26. .then(result => populateTable(Object.values(result)))
  27. .catch(error => console.log('error', error));
  28.  
  29. function rowTemplate(r) {
  30. return html `
  31. <tr>
  32. <td>${r.firstName} ${r.lastName}</td>
  33. <td>${r.email}</td>
  34. <td>${r.course}</td>
  35. </tr>`
  36. }
  37.  
  38. function populateTable(data) {
  39. let rows = data.map(d => rowTemplate(d));
  40. cached = data;
  41. render(rows, tbody);
  42. }
  43.  
  44. function onClick() {
  45. let queryString = inputField.value;
  46. if (queryString.length > 0 && queryString !== "") {
  47. let differentLis = cached.map(r => (selRowTemplate(r, queryString)));
  48. inputField.value = "";
  49. render(differentLis, tbody);
  50. }
  51. }
  52.  
  53. function selRowTemplate(r, queryString) {
  54. let rString = Object.values(r).join(" ")
  55. return html `
  56. <tr class=${rString.toLowerCase().includes(queryString)?"select":""}>
  57. <td>${r.firstName} ${r.lastName}</td>
  58. <td>${r.email}</td>
  59. <td>${r.course}</td>
  60. </tr>`
  61. }
  62. }
  63.  
  64. solve();
Advertisement
RAW Paste Data Copied
Advertisement