Javascript Tools that I used to make my Spidey Project
As mentioned in my last post, I used the Javascript coding language in conjunction with a Rails backend to create a system of tracking Spiderman and his buddies through comic history. Today, I wanted to highlight a few tools in Javascript that I used in this project.
Fetch Requests and Asynchronous Actions
Javascript has the ability to run asynchronously, meaning that lower lines of code can continue to run even if an action that is outlined above it is still being processed. This is particularly important when you are pulling data (information, images, videos, ect.) from another source, then plan to do something with that data in your program.
In order to make this work, you can use the method known as fetch( ). This method takes an argument of the resource destination you want to literally fetch your information from. This returns a promise to your code that something will be there once the information is fully loaded. You can then use .then( ) blocks to continue to manipulate this information as needed while the fetch is still happening. For this reason, each of these .then( ) blocks return their own promise and can be chained to one another.
The first .then( ) block usually takes the raw information and renders it in JSON, which is essentially a notation that the Javascript language can read. The second .then( ) block then allows you to take that string and do what you need with it.
In my project, I needed to rely on the fetch( ) method quite a bit to pull and manipulate information from the backend database that I had set up. See below for an async line of code that was used to pull all of the Spideys from the database and project them onto the main page in the app.
API. fetchAllSpideys() {
fetch(“http://localhost:3000/spideys").then(response => response.json()).then(fetchedArray => fetchedArray.forEach(spidey => {
console.log(spidey);
const newSpidey = new Spidey(spidey);
newSpidey.renderSpidey(spidey);
}))}
In the above block of code, I used the fetch method to download the list of Spideys and all of the information that goes along with them. Next I took the promise that the fetch provided and converted it to JSON. Then I took that array of information and passed it into the console log to ensure that what was downloaded was correct. Next, this information was put into a few other other methods to create instances of each Spidey and render them on the app.
Constructor Methods
constructor( ) is a method used in Javascript that provides specific initialization of a class object. This method must be done before any methods are allowed to be called on an instantiated object.
After the information on each Spidey was fetched, it was then brought into the constructor method that I had attached to the code above (new Spidey(spidey) )
As you can see from the code below, the information from the database for each Spidey was placed into the argument and then each attribute was individually initialized underneath using the keyword this.attr.
constructor({id, image, alias, surname, year }){
this.id = id
this.image = image,
this.alias = alias,
this.surname = surname,
this.year = year
Spidey.all.push(this)
}
Javascript Array Methods (how I used .forEach in my project)
A few months ago, I posted a blog article about different enumerator methods that Ruby has for manipulating different arrays. Javascript has a lot of additional methods that can be used on arrays. I wanted to highlight a few that I used in my project here.
.forEach( )
The .forEach( ) method is used to run a loop over each object in an array and run a function over each one. You can see this method used when I fetched the JSON array for all of the Spideys. Each Spidey’s information was sent to the next function individually one after another.
.push( )
The .push( ) method is used to add new elements into an array. This can be seen after the constructor method in the Spidey Class. After each Spidey instance is created, it is added to an array that stores all of the Spideys on the front-end.
.sort( )
The .sort( ) method is used to sort an array based on given parameter. Early on in my project development, I had each Spidey sorted by the year they were introduced. I plan to add this to the final project update.
.then(data => {
data.sort((a,b) => (a.year > b.year) ? -1 : ((b.year > a.year) ? 1 : 0))
