Sort Data Using JavaScript- 4

Well, peers, you have made to the final part of ‘sort data using JavaScript’ series. Now, in the last part, we will see how to implement JavaScript arrays in our case study to tame data. We have already discussed the different JavaScript arrays which will help you in the task. So, let’s see how to practically implement these arrays.

Applying Arrays to Our Case

So, once the data is sorted, next we have to assign ‘get the data’ button to retrieve the particular subsets of data. As we have numerous different items in our JSON data, that’s why to bind data with the button we have to use main.js. This code will look like this;

document.getElementById(“submitBtn”).onclick =
function(e){
e.preventDefault();
let state = document.getElementById(“stateInput”).value || “All”
let year = document.getElementById(“yearInput”).value || “All”
let subset = window.fetchData.filterData(year, state);
if (subset.length == 0 )
subset.push({‘state’: ‘N/A’, ‘year’: ‘N/A’, ‘total’: ‘N/A’})
document.getElementById(“output”).innerHTML =
`<table class=”table”>
<thead>
<tr>
<th scope=”col”>State</th>
<th scope=”col”>Year</th>
<th scope=”col”>Arrivals</th>
</tr>
</thead>
<tbody>
<tr>
<td>${subset[0].state}</td>
<td>${subset[0].year}</td>
<td>${subset[0].total}</td>
</tr>
</tbody>
</table>`
}

Data Sorting

Well, in our case, we have included two filters; Year and State. So, if you leave any of the field blanks, then that field will default to ‘All’. The following code is available in /js/main.js. You’ll want to look at the filterData() function, it’s a place where we kept a major share of our functionality for the aggregating and filtering.

// with our data returned from our fetch call, we are going to
// filter the data on the values entered in the text boxes
fetchData.filterData = function(yr, state) {
// if “All” is entered for the year, we will filter on state
// and reduce the years to get a total of all years
if (yr === “All”) {
let total = this.jsonData.filter(
// return all the data where state
// is equal to the input box
dState => (dState.state === state)
.reduce((accumulator, currentValue) => {
// aggregate the totals for every row that has
// the matched value
return accumulator + currentValue.total;
}, 0);

return [{‘year’: ‘All’, ‘state’: state, ‘total’: total}];
}

// if a specific year and state are supplied, simply
// return the filtered subset for year and state based
// on the supplied values by chaining the two function
// calls together
let subset = this.jsonData.filter(dYr => dYr.year === yr)
.filter(dSt => dSt.state === state);

return subset;
};

// code that displays the data in the HTML table follows this. See main.js.

When a state or year is blank, then it will automatically default as ‘All’ and we have to filter down dataset to that particular dimensions. And, have to summarise metrics for all rows in dimension. However, when we enter a value in both the year and state field, then we will simply filter the data. For example;

  • Start with the raw transactional dataset.
  • Generate semi aggregated and multidimensional datasheets.
  • Now, dynamically generate a composed result.

Once the data is pulled down by the client, then we can manipulate data as we please without making subsequent calls to the server. This feature is useful because if a user lost connectivity, but still they won’t lose the ability to manage the data. It is very useful when you are creating progressive web apps which are always required offline.

If you get yourself familiar with all three functions (which we disclosed in the third part), then you can create almost any type of data analysis. Just always remember to map a dimension in your dataset to a broader category and summarize using reduce.

Well, we hope that you get a better outlook on how to sort data using JavaScript by now. As we have already mentioned at the beginning of the series that client-side JavaScript is no substitute for translating and transforming hefty data on the server, but we can’t completely rule out the possibility.

Send a Message