API (when implementing asynchronous communication)

Premise

--This is the content about the API when implementing asynchronous communication. --The description of the controller and the corresponding .json.jbuilder are in the article.

• For a summary of those who want to check all the asynchronous communication procedures from the introduction of jQuery here

What is API

A server mechanism that returns in a format such as JSON.

For requests made asynchronously "Mechanism to prepare a mechanism to respond to the requested data" is realized by creating an API.

Rails defaults to returning HTML, It is also possible to return data in JSON format so that it can be handled from JavaScript.

How to add an API

There are multiple ways to add an API in Rails. This time, how to add it to the controller (action).

"In the case of asynchronous communication to the original controller, data for asynchronous communication is returned."

Write to return JSON instead of HTML.

• In Rails, you can branch to each HTML or JSON format in one action.

Use respond_to to return a response to a JSON-formatted request

Implement for action. Create Songcolor in the following cases. After that, describe in what format the request is returned (response).

<Example A>#####_controller.rb (corresponding controller)

  def create
    @songcolor = Songcolor.create(color: params[:color], song_id: params[:song_id])
    respond_to do |format|
      format.json
    end
  end

▼▼▼ Details ▼▼▼ 　 By using a method called respond_to You can create a response according to the format. It corresponds to the implementation of "make it possible to return in JSON format". In the future, it will be necessary to create a JSON format file "create.json.jbuilder" together with this. Describe the data to be returned. Also, the file name should be the same as the action name to make it correspond. This time it corresponds to the create action, so it will be "create.json.jbuilder".

<Example> Further pick up the important range of the above code

    respond_to do |format|
      format.json
    end

By writing in the action After 〇〇 (action), return it by the method according to the request after respond_to above.

There is also a method that does not create the file of 〇〇.json.jbuilder.

You can also add {} to render to complete it as shown below.

• When using a chat app that allows you to post for each group as an example.

<Example>#####_controller.rb

respond_to do |format|
  format.json { 
    render json: { id: @user.id, name: @user.name }
  }
end

When creating a .json.jbuilder file

ruby:<Example> app/views/messages/show.json.jbuilder

json.content @message.content

=> { content: "@message content" }

jbuilder has a hash like key on the left and value on the right json.content is key, @ message.content is value

In my app , write the key and hash "json.color @ songcolor.color". You need to think about what you need to do to call the information you want to pass and display from the data.

Next work 〇 〇 When creating json.jbuilder

Put the name corresponding to the action in 〇〇 Create 〇〇.json.jbuilder.

Terminal

%app name/views/messages/〇〇.json.jbuilder

The description inside is based on the content described earlier [Reference](https://qiita.com/kusaharajiji/items/3b374c73c12233485feb#jsonjbuilder%E3%81%AE%E3%83%95%E3%82%A1%E3%82 % A4% E3% 83% AB% E3% 82% 92% E4% BD% 9C% E6% 88% 90% E3% 81% 99% E3% 82% 8B% E5% A0% B4% E5% 90% 88 ).

Check if jbuilder is loaded

It is loaded when the characters "Rendered" and "jbuilder" are visible.

This is the end! !!

Subsequent asynchronous communication flows also create articles.

One last word

The API mechanism is a description of the contents of the controller. After that, information will be exchanged. I'm wondering if jbuilder decides the content of the data and Ajax passes the data. I haven't studied enough about what kind of work is from where to where.

Insufficient understanding in this time

--Description (key and value) when completing with only the controller that does not create the jbuilder file --How to write in jbuilder (also key and value) --The mechanism of HTML and JSON branching in the respond_to method. (I think a request will come, but the flow is unknown)

I wanted to deepen my understanding of this.

Related Links

It is [here]([ttps: //kayoblog.org/programming_myapp_hidoukitushin/) that describes all the flow of asynchronous communication from the introduction of jQuery.