How to: Rails with Javascript Portfolio Project
By: Yina Zhu
Tags: Ruby on Rails, JavaScript, Flatiron School, Github

For this project, I incorporated javascript methods into my exisiting Rails project, titled Sync. Here is the link to my github repo.. I duplicated the repo and retitled it to Sync-v2.

I printed out the requirements and had it next to me while I was working on the project. So do not get stuck! Focus on the requirements, do not dwell!

Please watch these videos before starting on the project! I wish I watched these before I began my project. These are in high definition so you can see the code, the audio is clear and the instructor Cernan Bernardo gets straight to the point and makes it super easy to follow. This video is one hour long and starts coding from scratch. and This video is 15min and touches basics.. Also, check out Brad Smith’s video and github on this project.

Ok, so to briefly explain my app: Users as a host can create events and invite guests. In turn, users as a guest can be invited to an event. The ‘has-many’ relationship, I will need to render for this project is that an Event has many Guests.

First, set up your current rails project with Javascript gem and set up your Javascript manifest and REMOVE TURBOLINKS!!!

Second, render your data as .json in your browser and set up your model serializers. Serializers are basically the Javascript version of what models are in Rails.

Third, set up your index action in your eventscontroller.rb file.

For this project, you only need to render one model, like so:

respond_to do |f|

f.html {render :index}

f.json {render json: @events && @invites}

and it will render:

The above image shows all the events a user/host has created. But let’s say you also want the events where the user/guest has been invited to. This is the .json data that shows both of those events. Modify your controller to look like this: (this is my index method in eventscontroller)

respond_to do |format|

format.html {render :index}

format.json { render :json => {:invites => @invites, :events => @events }}

so that the json will look like this in the browser:

Fourth and finally it’s time to code in your .js file. This is basically the Javascript version of your controller file. I find using handlebars MUCH easier. I stumbled on this by accident. I dont know how I switched my course over to Javascript V3 and was on that lesson. I didn’t use handlebars on this app though because it was nearing completion and i just wanted to complete this project as I’m pressed for time.

This is what you should see when you use a debugger. After doing all of the steps above:

Other things that helped:

USE BREAKPOINTS! Don’t bother using debugger and console.log (ok, use this sparingly). Breakpoints is a major major time savor and you can see in real time, where your code/data breaks. If you are really stuck, reach out to your section lead or ask questions in Slack, just reach out and someone or anyone and they will respond. Do not give up. If you are able to attend any meetups or study groups or pair up. People are always willing to help. One way to know your material is if you could teach others. So pay it forward if you could as well.

My biggest issue in this project was this error I was getting:

.map() does not like the type of data that response. .map() could only iterate an array and what I was iterating over was an entire object that had keys within a key. So I had to be specific. So I changed my code from:

response.guests.map(function(guest)

to

response.guests.map(function(guest)

Overall thoughts Javascript is now the third language I’m learning and I’m now starting to grasp the concept of computer langugage and the restful conventions / patterns that programmers have to code in. Barely scratching the surface of the iceberg… the journey continues…