bendi-api/script.js at main · Velink/bendi-api · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
//Fetch the data
function fetchData(){
    fetch("http://localhost:3000/cities").then(response => {
      return response.json();
    }).then(data => {
      // Obtain Query Parameter
      const queryString = window.location.search;
      console.log(queryString);
      const urlParams = new URLSearchParams(queryString);
      console.log(urlParams);
      const field = urlParams.get('orderByField').toLowerCase();
      console.log(field);
      sortTableByColumn(data, field);
        })
  }

  fetchData();

  //Sort the data based on given query parameter
  function sortTableByColumn(data, field){
      switch(field) {
        case "city":
            const cityArray = data.sort((a, b) => {
            const aColText = a['City'];
            const bColText = b['City'];
            return aColText.localeCompare(bColText)
            });

            console.log(cityArray);
            displayData(cityArray);
          break;
        case "country":
            const countryArray = data.sort((a, b) => {
            const aColText = a['Country'];
            const bColText = b['Country'];
            return aColText.localeCompare(bColText)
            });

            console.log(countryArray);
            displayData(countryArray);
          break;
        case "all buildings":
          const buildingsArray = data.sort((a, b) => {
          const aColText = a['All\nBuildings'];
          const bColText = b['All\nBuildings'];
          return bColText - aColText;
          });

          console.log(buildingsArray);
          displayData(buildingsArray);
          break;
        case "100m+":
            const hundredArray = data.sort((a, b) => {
            const aColText = a['100m+'];
            const bColText = b['100m+'];
            return bColText - aColText;
            });

            console.log(hundredArray);
            displayData(hundredArray);
          break;
        case "150m+":
            const hundredFiftyArray = data.sort((a, b) => {
            const aColText = a['150m+'];
            const bColText = b['150m+'];
            return bColText - aColText;
            });

            console.log(hundredFiftyArray);
            displayData(hundredFiftyArray);
          break;
        case "200m+":
            const twoHundredArray = data.sort((a, b) => {
            const aColText = a['200m+'];
            const bColText = b['200m+'];
            return bColText - aColText;
            });

            console.log(twoHundredArray);
            displayData(twoHundredArray);
          break;
        case "300m+":
          const threeHundredArray = data.sort((a, b) => {
            const aColText = a['300m+'];
            const bColText = b['300m+'];
            return bColText - aColText;
            });

            console.log(threeHundredArray);
            displayData(threeHundredArray);
          break;
        case "telecom towers":
          const towersArray = data.sort((a, b) => {
            const aColText = a['Telecom\nTowers'];
            const bColText = b['Telecom\nTowers'];
            return bColText - aColText;
            });

            console.log(towersArray);
            displayData(towersArray);
          break;
        case "all structures":
          const structuresArray = data.sort((a, b) => {
            const aColText = a['All\nStructures'];
            const bColText = b['All\nStructures'];
            return bColText - aColText;
            });

            console.log(structuresArray);
            displayData(structuresArray);
          break;
      }
  }

  //Display the sorted data
  function displayData(data) {
      var table = document.getElementById('myTable');
      var tBody = table.tBodies[0];

      //Remove all existing TRs from the table
      while(tBody.firstChild) {
      tBody.removeChild(tBody.firstChild);
      }

      //Add new sorted data to table
      for(var i = 0; i < data.length; i++){
          var row = `<tr>
                          <td>${data[i]['#']}</td>
                          <td>${data[i].City}</td>
                          <td>${data[i].Country}</td>
                          <td>${data[i]['All\nBuildings']}</td>
                          <td>${data[i]['100m+']}</td>
                          <td>${data[i]['150m+']}</td>
                          <td>${data[i]['200m+']}</td>
                          <td>${data[i]['300m+']}</td>
                          <td>${data[i]['Telecom\nTowers']}</td>
                          <td>${data[i]['All\nStructures']}</td>
                     </tr>`
                     table.innerHTML += row;
      }
  }