Forem: august-jk

Showing Relational Tables in Your JSON Response

august-jk — Tue, 03 Jan 2023 21:25:36 +0000

Consider this scenario:

You're a ruby developer and you've just set up a few models with a one-to-many relationship, for the purpose of this blog we'll say the models are Author and Book.

An Author has_many :books and a Book belongs_to :author

This is common, as in programming we tend to rely on real-world models for our code. A pet can belong to an owner and an owner can have many pets, and a game can have many reviews, but a review can only belong to that one game.

Let's also say, you've developed a React frontend where you need to show these relationships, and your backend is using Ruby, ActiveRecord, and Sinatra.

Well, it sounds like you need to use "include:" in your Sinatra ApplicationController!

Let's get started!

Locate your Application Controller; this is the part of our Ruby backend that will handle what endpoints we will fetch from inside our React frontend.

Using our Author and Book models, here is what this class might look like:

class ApplicationController < Sinatra::Base

  get '/authors' do
    Author.all.to_json
  end

end

Making sure that we inherit methods from Sinatra::Base will allow us to use various options inside our Controller file.

Here's an example of what JSON data we might receive if we visit http://localhost:9292/authors (once we have started the server, that is):

[
  {
    "id": 1,
    "name": "J. R. R. Tolkien",
    "image_url": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQO-WAOvTtPuzb5mS0h2GIZvwSO-HLofOY7VZRZBfcVW8wEJQUa"
  }
]

This is nice, but what if we want to see all of the books this author has written?
We would then need to create a new route inside our Application Controller, see a list of all the books in our database, then compare the author_id of each book to our desired author's id...
I don't know about you, but that sounds like a lot of extra and unnecessary work!

There's one little line of code we can add to our author's route that will make things a little easier, can you spot the difference?

class ApplicationController < Sinatra::Base

  get '/authors' do
    Author.all.to_json(include: :books)
  end

end

Hey! This new route says (include: :books), what's that about?

Well, that little line of code allows the books associated with the authors to be included in the JSON data without a whole lot of extra work!

Here's what our JSON data will look like now:

[
  {
    "id": 1,
    "name": "J. R. R. Tolkien",
    "image_url": "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQO-WAOvTtPuzb5mS0h2GIZvwSO-HLofOY7VZRZBfcVW8wEJQUa",
    "books": [...
    ]
  }
]

You can further customize the data you receive by changing up the syntax a bit (depending on how you set up your classes and what you'd like to return), but there you have it!
A great way to receive all of the data you need for your frontend without having to rely on using a GET request to fetch data more than once.

How to create a RESTful API with JSON Server

august-jk — Sat, 01 Oct 2022 00:08:29 +0000

What is an API?

An API, or Application Programming Interface, is a set of functions and procedures allowing the creation of applications that access the features or data of an operating system, application, or other service.
In other words, an API is an interface that allows applications to communicate with each other and exchange data.
Developers will use APIs to send and retrieve data from servers to use on their applications.

What is a RESTful API?

REST stands for Representational State Transfer and is a type of API that conforms to the constraints of REST architectural style.
In order for an API to be RESTful, it must conform to specific criteria such as:

A client-server architecture made up of clients, servers, and resources, with requests managed through HTTP
Stateless client-server communication, meaning no client information is stored between get requests and each request is separate and unconnected
Cacheable data that streamlines client-server interactions
A uniform interface between components so that information is transferred in a standard form

RESTful APIs are faster and more lightweight than other, older types of APIs.

Why set up a RESTful API using a JSON Server?

Sometimes front-end developers will need to simulate a back-end REST service to deliver data in JSON format to their front-end application in order to make sure everything is working properly.

Of course, you could set up a full back-end server, but that would take some time to complete.
Creating a RESTful API using a JSON Server is simpler and faster.

Setup

Continue reading to learn how to set up a RESTful API using JSON Server!

Installing JSON Server

JSON Server can be installed as an NPM package.

Type into your terminal:

$ npm install -g json-server

By adding the -g we are installing it globally on your system.

JSON File

Now we'll create a new file called db.json
This file will hold all of your data!

Here is an example of how this file should look:

{
  "cats": [
    {
      "id": 1,
      "name": "Fluffy",
      "color": "white",
      "favorite_toy": "fuzzy ball"
    },
    {
      "id": 2,
      "name": "Oreo",
      "color": "black and white",
      "favorite_toy": "toy mouse"
    },
    {
      "id": 3,
      "name": "Luna",
      "color": "brown and grey tabby",
      "favorite_toy": "laser pointer"
    }
  ]
}

You can see we have a JSON file has an object labelled "cats". Inside the object is an array of 3 different cat objects each containing their name, color, and favorite toy.
This is how the data inside of a JSON Server looks.

Running the Server

Type into your terminal:

$ json-server --watch db.json

Now your server is running and you can begin to make any FETCH requests to http://localhost:3000/cats
If you make POST, PUT, PATCH or DELETE requests, changes will be automatically saved to db.json.
A POST, PUT or PATCH request should include a Content-Type: application/json header to use the JSON in the request body. Otherwise it will result in no changes being made to the data.

Keeping your code DRY

august-jk — Wed, 22 Jun 2022 02:24:40 +0000

Hello World!

Welcome to my first ever blog post!

I thought I would start with something that took me some time to get used to:

Keeping your code DRY.

DRY stands for Don't Repeat Yourself, which I have a hard time with in my day-to-day interactions, so you can imagine how writing DRY code could be quite foreign to me!

How do you write DRY code?

Well, let's first look at some WET (Write Everything Twice) code.

Let's say you're iterating over an array:
let array = [1, 3, 6, 9]
We want to increase each number in the array by 1, so our result would be:
[2, 4, 7, 10]
Here's what that would look like:

function increaseByOne(array) {
  for(let i = 0; i < array.length; i ++) {
    array[i] += 1
    }
  return array;
}

This looks like a nice snippet of code, right?

And it definitely gives us the output we're looking for!

Well, if you really look at it, a few things could be improved!
First of all, we can only use this to add 1 to each number in the array.
What if we wanted to subtract 1? Or multiply by 2?
We would have to write an entirely new function and it would definitely be WET:

Let's take a look at how we would write a function to multiply by 2 in the same way:

function multiplyByTwo(array) {
  for(let i = 0; i < array.length; i ++) {
    array[i] *= 2
    }
  return array;
}

That's almost identical and yet we're still repeating ourselves!

How can we make this more straightforward and easier to read as well as making the code itself a little more diverse?

One of my favorite built in JavaScript methods is .map()

.map() tells your code to iterate over an array, then it takes a callback function to do whatever it is you need to do with that array!

And the best part is, it's non-destructive so we can avoid any bugs.

Let's rewrite that first function and use .map() instead:

function increaseByOne(x) {
return x + 1;
}
array.map(plusOne)

Wow! It's that easy?

It definitely is, and doesn't that look a whole lot cleaner too?

Now let's replicate the second function:

function multiplyByTwo(x) {
return x * 2;
}
array.map(multiplyByTwo)

That looks great!

.map() has to be one of my favorite built in JavaScript methods, and now you know why!