Active Model Serializer formatting JSON display

Question

I am using Active model serializer in my rails app and I want to refactor the display:

Whenever I go to http://localhost:3000/api/users/1 I see:

{"data":{"id":"1","type":"users","attributes":{"username":"Iggy1"},"relationships":{"items":{"data":[{"id":"1","type":"items"},{"id":"7","type":"items"}]},"lists":{"data":[{"id":"1","type":"lists"},{"id":"8","type":"lists"},{"id":"14","type":"lists"},{"id":"15","type":"lists"},{"id":"17","type":"lists"}]}}}}

How can I make it to look like:

{
    "data": {
        "id": "1",
        "type": "users",
        "attributes": {
            "username": "Iggy1"
        },
        "relationships": {
            "items": {
                "data": [{
                    "id": "1",
                    "type": "items"
                }, {
                    "id": "7",
                    "type": "items"
                }]
            },
            "lists": {
                "data": [{
                    "id": "1",
                    "type": "lists"
                }, {
                    "id": "8",
                    "type": "lists"
                }, {
                    "id": "14",
                    "type": "lists"
                }, {
                    "id": "15",
                    "type": "lists"
                }, {
                    "id": "17",
                    "type": "lists"
                }]
            }
        }
    }
}

I have spent a good amount of time browsing through adapters, rendering, architecture, but I couldn't find the guide. First off, is it possible to make it look like the second code block above? Second, if it is possible, what must I do to change the display?

api/users_controller.rb

   def show
     @user = User.find_by(id: params[:id])
     @no_user_found = User.all #other alternative when user ID not found?
     if @user.nil?
       flash[:notice] = "No user found"
       render json: @no_user_found, each_serializer: UserSerializer
     else
      render json: @user, each_serializer: UserSerializer
    end
   end

user_serializer.rb

class UserSerializer < ActiveModel::Serializer
   attributes :id, :username#, :email
   has_many :items, through: :lists
   has_many :lists
end

routes.rb

Rails.application.routes.draw do
  ActiveModelSerializers.config.adapter = :json_api
  namespace :api, defaults: { format: :json } do

     resources :users do
       resources :lists
     end

     resources :lists, only: [] do
       resources :items, only: [:create, :index, :show, :update]
     end

     resources :items, only: [:destroy]
   end
end

Answer 1

Instead of using browser, I suggest to use Postman pretty_generate.

You can render it with indentions and newline using the following below code:

<pre><%= JSON.pretty_generate(your_json_here) %></pre>

In your code above do it with:

<%
  require 'json'

  hash = JSON[{"data":{"id":"1","type":"users","attributes":{"username":"Iggy1"},"relationships":{"items":{"data":[{"id":"1","type":"items"},{"id":"7","type":"items"}]},"lists":{"data":[{"id":"1","type":"lists"},{"id":"8","type":"lists"},{"id":"14","type":"lists"},{"id":"15","type":"lists"},{"id":"17","type":"lists"}]}}}}.to_json] 
%>

<pre>
  <%=  JSON.pretty_generate(hash)%>
</pre>