DEV Community: Ayushman Parasar

How to use json-jbuilder in Rails

Ayushman Parasar — Mon, 24 Aug 2020 17:24:25 +0000

This post is just a mere attempt to log-in what I have learnt about json-jbuider and is not a tutorial but I know this will help those who have just began to learn Rails.

Okay then lets start!!

First of all Jbuilder is a template for rendering json responses. Rails comes preloaded with jbuilder gem which helps to create JSON structures. Lets see its use-case scenerio:

For example we are making a blog app in which we have a lot of articles and users who create those articles. So we have two models a User model and an Article model. A User model has many articles and an Article model belongs to User.In Article model we have a reference to the user model through user-id(basically author of the article). Now suppose we have a case where we need to show the list of articles with few details of each article including author information. In the articles controller we have the following action.

def index
  @articles = Article.all
end

Here @articles is an array containing all the articles and each article has the info corresponding to that particular row of the article table. We also need the author information but we have only the author id in the article table. This is the case where jbuider comes into flow.

By default rails looks for a template of the requested format. For rendering response to JSON query we will need a template. We make a template called index.json.jbuilder in the views/api/v1/aricles directory. This file contains the logic for populating the nested attributes of the article model(eg: user). Here we have namespaced the directory because I think its better to have a clear seperation of our APIs.
In the index.json.jbuider add the following lines:

json.articles @articles do |article|
  json.partial "article", obj: article
end

In the above lines, we are defining a key in json called articles and we are taking the array @articles that we made in the articles controller and we are iterating over each article of the array and rendering a partial with an object "obj" containing the article details. Partial rendering is one of the plus points of using jbuilder.

As of now we dont have a partial so lets make one and name it "_article.json.jbuilder" in the same directory i.e views/api/v1/articles. Now lets add the following lines in the partial:

json.id obj.id
json.title obj.title
json.author do 
  json.user_id obj.user.id
  json.name obj.user.name
end

What is happening above is that we are structuring a json file where json.id , json.title, json.author are the keys . Here we are able to get user details other than the id.
There is one more way of doing this

json.(obj, :id, :title) 
json.(obj.user, :id, :name)

But I find the first one more useful.

I hope this article was useful and if there was anything I explained incorrectly or if there was a different apprach or if I missed anything do let me know. Thanks!!!

What to choose VAR, LET or CONST?

Ayushman Parasar — Thu, 19 Dec 2019 14:43:01 +0000

When we write a program in javascript we use a lot of variables. These variables play an important role as they are name storage of data. So whenever we are declaring a variable we need to do it correctly so as to write error-free code. We can declare the variables using var , const or let .The behavior of let and const is somewhat similar whereas for var the scenario changes. Earlier there was no let and const , but only var . With ES6 both let and const came into action which was a relief for the developers.

So let us SEE HOW THEY ARE DIFFERENT

In terms of assigning:

let a = 4;
let a = 5;//wrong

Once I have done this let a = 4;
I cannot do let a = 5 within the same scope now the question is why?

When we are using let the following things happen in the above code:

it creates a space for ‘a’,
it assigns the value of 4 to a, Now when we try let a = 5 there is a syntax error that the identifier a has already been declared, this is because it tries to create a second space for the same variable a which is not possible with the use of let. const behaves in a similar way but the difference is that we need to assign a value at the time of declaration of the variable. That being said it should be const a = 5 and not const a;.The value of a variable declared with const cannot be updated or re-declared that is it remains the same within its scope Now let us come to var, when we write var a = 5
It allocates space for a and assigns it to the value of undefined.
It assigns the value 5 to a If we reassign var a = 6 then there would be no errors this time. This is because at the time when javascript was made it was never made to be at the scale where it is now, so many things were not planned and as such is the case of var . There is one more thing I got to know is that when we declare variables using var outside of function it becomes a global variable and becomes accessible to the window object which can cause issues in the program but this is not the case with let as it does not attach the variable with the window object.

In terms of scope:

First, let us understand what is meant by scope, we can take ‘scope’ to be the area of accessibility. In terms of scope, the variables declared with var are globally accessible or visible whereas the variables that are declared using let are locally accessible or visible within that block. For example


    for(let i = 0; i < 5; i++) {
    setTimeout(() => console.log(i))

In the code above the value of i will be 0 then 1 then and so on till 4 , thus the value of i is constrained to the particular iteration. Now let us see what happens in the case of var


    for(var i = 0; i < 5; i++) {
    setTimeout(() => console.log(i))

This time the output will be 5 times 5, what happened is that the loop gets executed and the current value gets stored in the global variable i since setTimeout puts a delay to the function console.log(), for every iteration the current value of i which is 5 is printed.
There are still other things that differentiate these variable declarations but I wanted to keep it at a novice level. I hope I was able to keep things simple for everyone to understand especially for anyone who has just started learning javascript.
So until next time,
Ciao!!!!!!

FUN with DOM

Ayushman Parasar — Sun, 08 Dec 2019 15:51:52 +0000

Last few days I have been learning JavaScript with the aim of becoming a full stack developer. As I go through this journey, I feel it would benefit me (and hopefully others) if I document my learnings. Thus comes the first installment - DOM (not to be confused with DOMinic Toretto - bad joke? Yeah, probably).

So what is DOM?

Dom is nothing but a model of a document where contents can be treated as objects thus every element of the HTML becomes an object. The model here represents how the objects form a tree-like structure. It represents the document as a node tree, where each node represents part of the document.
In simple words, a web page is a document that can be either displayed in the browser window or as the HTML source but it is the same document in both cases. Document Object Model (DOM) represents that same document so it can be manipulated and the content of the page is stored in DOM and can be accessed and manipulated using Javascript. In order to manipulate the element one has to first select that particular element.

Now, let us see how we can access the contents of a page using DOM(traversing the DOM):

Accessing the elements of the page can be done using various methods like 'querySelector', 'querySelectorAll',getElementsBy*, etc. For example,

var elem = document.querySelector('.check');

Here the document is a predefined object and it represents the entire page that is loaded into the browser. Using this document object we can access various predefined functions and objects. In the above code, we are using querySelector() which returns the first element within the document that matches the specified selector (in this case the class "check").

Manipulation of Content:

In the above example, the elem element is an object representing the targeted div having class "check". Now using this elem we can manipulate the contents of that div and even make this div perform a function. Now let us see what we can do with it.

elem.textContent ="Hello World";

In the above code, we have changed the text content which was earlier Lorem to Hello World.

Let us take another example.

let buttonObj = document.querySelector('.button');

Here we are selecting a button by its class and creating an object buttonObj.

buttonObj.addEventListener('click',displayHello);

Let me explain what the above code does. The addEventListener() is an inbuilt JavaScript function that takes the event and also a second argument, a function that gets called every time the event is fired. Thus in our case whenever we click on the button, the function displayHello gets called which is declared as follows:

function DisplayHello(){
alert("Hello");
}

So every time we click on the button an alert window appears showing a message "Hello World".

This is just the basic use of DOM, I hope I could provide an insight of what DOM is, how we can access the elements of a web page using DOM and how we can manipulate the contents. For more clarity the following resources can be used:

www.developer.mozilla.org

https://javascript.info