Structure JavaScript – Building a Simple Data Service

Introduction

Data is the life blood of any application. Most of the times, applications are busy doing data operations. Those can be reading, writing, updating or deleting data along with some other business specific data operations.

In a typical client/server applications, data can requested from the backend server and then client application use it for its purposes e.g. displaying it to user in a grid.

In this post, we will focus on data operations on client side i.e. in JavaScript based client application. We will create a data service which will centralize these data operations.

Now most of the time, data will be coming from backend (e.g. a REST API), this is typically done via making an AJAX call to backend. However, for the purpose of this demo, we will be using a JSON file as a data source. This can seen as an offline data provider as well. But if you need, you can use the same learning in this post to change it to work with backend server as needed.

I will be using an existing codebase which I used for my previous articles on structuring JavaScript code. The contents you will see here will also require some understanding of ES6 modules and classes. If you are not familiar with those concepts, I will suggest to read my previous articles first and this way, it will be much simpler to follow the material presented in this post.

You can read previous article on this link.

Setting the scene

Here is the codebase from the previous post. You can download the starting point from from this git repo (oopBasics branch):

The first thing, I want to do is to create couple of folders and arrange the files there as shown below:

Source Data

We will use a JSON file for this purpose, so our application will read data from this file (you might need to get the data from REST API, you can do that, core principal is same). Here is the JSON file vehicles.json for your reference: This file contains data about some cars and trucks in our system:

Create the Vehicle-Data-Service Class

Let’s create a vehicle-data-service class which will hold all the vehicle data we read from JSON file. Following is the initial structure of this vehicle-data-service class:

So this class hold two arrays for cars and trucks data and then there is a method loadData(data) which accepts input data which we will get from outside. currently it is just writing it to console and we will update it a little bit later in this post. But first, lets see how to read data from JSON file and send it this loadData method.

Using AJAX to Read JSON Data

If you remembered from earlier post, we already have a module (ajaxService.js) which we can use here for this purpose.

Let me show you the code for this operations (aap.js):

So in this simple example, we imported some code (import keyword), then we created an instance of VehicleDataService and we are also using makeAjaxRequest functionality to read the JSON file and then passing the received data to vehicleDataServie.loadData(data) method, which we saw earlier, is just writing to console. Here is the output of this operation:

We will be validating the data and setting up methods to query it or perform other operations in VehicleDataService, later.

Looping Through Data

We are receiving data via loadData method but currently we don’t know if it is a Car or a Truck. ES6 has an easy way (for of loop) to loop through arrays and we can use this and then process the data as per our needs:

Here we are using a simple switch statement and then based on the type field, just pushed the data to corresponding arrays. We will add more logic to it later, but for now lets see if arrays are populated correctly:

So, we have our data loaded. Its not validated, it might be inaccurate and we are still not using the model classes (car.js, truck.js). Lets do that next.

Populating Core Model Classes

From the previous post, we have two model classes to represent our business objects (i.e. car and truck). Let’s use those instead of working with raw data:

In the updated code shown above, we are using helper methods loadCar and loadTruck to create instances of model classes and then pushing those instances to the arrays.

Here is the code for helper methods:

Based on our requirements, we can do some additional processing there in those methods as well e.g. data transformation etc.

Let’s test the code by updating app.js file as shown below:

setTimeout is used to facilitate the console.log. Here is the output of the operation:

Now, we have a very basic structure of data-service setup. We can add more functionality to it e.g. validating the data before creating class instances, collecting data errors, querying and filtering data etc.

Inside the data service, we are using arrays, we can use different arrays methods to implement some functionality easily. Give it a try.

Summary

In this post, we saw how we can create a basic data-service for our application. It uses ES6 Classes and Modules functionality which we learned in previous posts. You can download the code from this git repository (branch name: basicDataService).

Let me know if you have some comments or questions. Till next time, Happy coding.

My Recent Books