Sort. Data Using JavaScript- 2

Okay, so in the previous part of the series, you have studied all about data. Now, in this part, we will observe the data sorting using JavaScript with the help of a case study. This case study’s full codes are available on GitHub, however, for the compiled knowledge read this post carefully.

The Case Study

The case study that we will use BuzzFeed’s dataset from “Where U.S. Refugees Come From—and Go—in Charts.” We will here design a small app which will show us how many refugees come in selected state and in which year. Especially, our app will show the following information;

  • Total arrivals for a state in a mentioned year.
  • Total arrivals for all year in a given state.
  • Total arrivals for all states in a given year.

Sorting Data Using JavaScript

Example of how to filter aggregated data in JavaScript.

To filter the required information from the aggregated data, you have to create a filter and to create filter following codes are required;

  • First, send a request for Data.
  • Now, convert the result to JSON.
  • Process the data. (Don’t implement this step until the whole data is retrieved)
  • If you have any error, then include it.
  • Display result to the user.

We don’t want to process large data over the browser because of two reasons; bandwidth and CPU considerations. That’s why we aggregate data on the server with Node.js.

Source data

[{“year”:2005,”origin”:”Afghanistan”,”dest_state”:”Alabama”,”dest_city”:”Mobile”,”arrivals”:0},
{“year”:2006,”origin”:”Afghanistan”,”dest_state”:”Alabama”,”dest_city”:”Mobile”,”arrivals”:0},
… ]

Multidimensional data

[{“year”: 2005, “state”: “Alabama”,”total”: 1386},
{“year”: 2005, “state”: “Alaska”, “total”: 989},
… ]

Methods to get Your Data Structure into Place

AJAX AND THE FETCH API

There are plenty of different ways in JavaScript to retrieve data from the external source. Earlier the XHR request is used to retrieve the data. But, it is relatively very complicated and required the assistance of different methods as well. There are also libraries like Axios or jQuery’s AJAX API present which reduces complexity and offer cross-browser request.

These libraries can be a great solution for you if you are using them already, however going for the native solution is a great idea. Like, Fetch API has been lately being a lot used by developers. This is a straightforward and chainable solution. And, if you are using a transpiler like Babel, then it will convert your code to a more widely supported equivalent.

For our case, we will use the Fetch API to pull data in the following way;

window.fetchData = window.fetchData || {};
fetch(‘./data/aggregate.json’)
.then(response => {
// when the fetch executes we will convert the response
// to json format and pass it to .then()
return response.json();
}).then(jsonData => {
// take the resulting dataset and assign to a global object
window.fetchData.jsonData = jsonData;
}).catch(err => {
console.log(“Fetch process failed”, err);
});

In the code, fetch() method sends the request for the data, and the results result is converted to JSON. To ensure that the next statement doesn’t execute until after the complete dataset is retrieved, we use the then() method and do all our data processing within that block. Lastly, we console.log() any errors.

This code is available on The GitHub library to try full. We have to this post here but don’t go anywhere as in the next series we will talk about the next method to get data into place and plenty of other informative stuff about our case study.

Send a Message