Filter-Search/main.js at master · PracticalCodeAcademy/Filter-Search · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
const table = [
    {
        name:'John Doe',
        age: '25',
        occupation:'Doctor',
        city:'LIC',
        state:'NY'
    },
    {
        name: "Susan Jons",
        age: '36',
        occupation: "Engineer",
        city: "Main city",
        state: "FL",
      },
      {
        name: "Mike Smith",
        age: '48',
        occupation: "Contractor",
        city: "Los Anglous",
        state: "CA",
      },
      {
        name: "Adam Jim",
        age: '62',
        occupation: "Surgent",
        city: "Flanders",
        state: "NJ",
      },
      {
        name: "Mike Doe",
        age: '26',
        occupation: "plummer",
        city: "LIC",
        state: "NY",
      },
      {
        name: "Sally Jons",
        age: '37',
        occupation: "blacksmith",
        city: "Main city",
        state: "FL",
      },
      {
        name: "Arnold Smith",
        age: '49',
        occupation: "unemployed",
        city: "Los Anglous",
        state: "CA",
      },
      {
        name: "Adel Jim",
        age: '61',
        occupation: "nurse",
        city: "Flanders",
        state: "NJ",
      }
]

const tableHeader = Object.keys(table[0]);
const search = document.querySelector('.filter-input');
const output = document.querySelector('.output');

window.addEventListener('DOMContentLoaded', loadTable);
search.addEventListener('input', filter);


function loadTable(){
    let temp = `<table> <tr>`;
    tableHeader.forEach( header=> temp+= `<th> ${header.toUpperCase()} </th>`);
    temp+=`<tr>`
    table.forEach(row => {
        temp +=`
        <tr>
          <td>${row.name}</td>
          <td>${row.age}</td>
          <td>${row.occupation}</td>
          <td>${row.city}</td>
          <td>${row.state}</td>
        </tr>
        `
    });

    temp+=`</table>`
    output.innerHTML = temp;
}


function filter(e){
let results;
let temp ="";

results = table.filter( item=>
    item.state.toLowerCase().includes(e.target.value.toLowerCase()) ||
    item.name.toLowerCase().includes(e.target.value.toLowerCase()) ||
    item.city.toLowerCase().includes(e.target.value.toLowerCase()) ||
    item.occupation.toLowerCase().includes(e.target.value.toLowerCase()) ||
    item.age.toLowerCase().includes(e.target.value.toLowerCase())
    );
   console.log(results)
    if(results.length>0){
        temp = `<table> <tr>`;
        tableHeader.forEach( header=> temp+= `<th> ${header.toUpperCase()} </th>`);
        temp+=`<tr>`
        results.forEach(row => {
            temp +=`
            <tr>
              <td>${row.name}</td>
              <td>${row.age}</td>
              <td>${row.occupation}</td>
              <td>${row.city}</td>
              <td>${row.state}</td>
            </tr>
            `
        });
        temp+=`</table>`
    }else{
        temp =`<div class="no-item">Item Not Found </div>`
    }

    output.innerHTML=temp;
}