How to create custom json format?

Phoenix Forum Questions / Help
1

Hi, I need to create customize json format. I have used many to many relationships with user, tags and taggable. Please find the code below here.

User Controller

web/models.user_controller.ex

defmodule VampDev.UserController do
  use VampDev.Web, :controller

  def index(conn, _params) do
 
    user =
      VampDev.User
      |> Repo.all()
      |> Repo.preload(:tags)

    json(conn, %{user: user})
	  
	  end
end

User model

web/models.user.ex

defmodule VampDev.User do
  use Ecto.Schema
  use VampDev.Web, :model
  
  @primary_key {:id, :string, []}
  schema "users" do
    field :name, :string
    field :country, :string
    many_to_many :tags, VampDev.Tag, join_through: "taggables"
  end
end

This is json output

// 20171107045356
// http://localhost:4000/api/v1/users

{
  "type": [
    {
      "tags": [
        {
          "name": "photo",
          "id": "a7d41c25-0452-47eb-b400-7237b2ff2c6d"
        }
      ],
      "name": "Alberto Giubilini",
      "id": "042807cc-26e1-4122-9235-23412eacaa79",
      "country": "Singapore"
    },
    {
      "tags": [
        {
          "name": "photo",
          "id": "a7d41c25-0452-47eb-b400-7237b2ff2c6d"
        }
      ],
      "name": "Hannah Maslen",
      "id": "0bdb2538-76c1-49b8-bee0-f27bbbfff8ae",
      "country": "Hong Kong"
    },
  ]
}

I have to customize the above json based upon the below Script .

JS in front end

<script>
    let request = (method, path) => {
      var headers = new Headers();
      headers.append('Accept', 'application/vnd.api+json');
      return fetch(new Request(`http://localhost:${path}`, {
        method,
        headers,
        mode: 'cors',
        cache: 'default'
      }));
    };
    let get = (path) => { return request('GET', path) };
    let put = (path) => { return request('PUT', path); };
    let post = (path) => { return request('POST', path); };
	
    (function init() {
     get('/vamp_test.php').then(response => {
        return response.json();
      }).then(json => {
        var includedMap = {};
        json.included.forEach(item => {
          if (!includedMap[item.type]) {
            includedMap[item.type] = {};
          }
          includedMap[item.type][item.id] = item;
        });

        json.data.forEach(item => {
          if (item.type && item.type.toLowerCase() === 'user' && item.relationships.taggables.data.length > 0) {
            var tagsHtml = item.relationships.taggables.data.map(taggableRelationship => {
              if (taggableRelationship && taggableRelationship.type === 'taggable') {
                var taggable = includedMap[taggableRelationship.type][taggableRelationship.id];
                if (taggable && taggable.relationships && taggable.relationships.tag && taggable.relationships.tag.data) {
                  var tag = includedMap[taggable.relationships.tag.data.type][taggable.relationships.tag.data.id];
                  if (tag) {
                    return `<span class="tag label label-default"">${tag.attributes.name}</span> `;
                  }
                }
              }
              return '';
            }).join('');

            var name = item.attributes['full-name'];
            var country = item.attributes.country || 'the earth';
            $("#main-list").append(`<li class="list-group-item"><span class="name"><strong>${name}</strong> from ${country}</span><div class="tags">${tagsHtml}</div></li>`);
          }
        })
      });
    })();
  </script>

I am getting the below error message whenever i run the page :frowning2:

Phoenix.NotAcceptableError at GET /api/v1/users

Exception:

How to fix this issue?

2

My suggestion is to use dedicated view for rendering the JSON as you would like, which would, eventually, remove the need of using any external JS to render your data.

Btw this JS snippet is ā€¦ weird. You want to do some requests to localhost and also get PHP page :slight_smile:

1 Like
3

When phoenix asks for media-type "json", it actually wants to see the MIME-type "application/json", you either have to convince phoenix about application/vnd.api+json beeing an acceptable MIME-type (Iā€™m not sure how if possible at all) or let your javascript issue with a correctly set accept header.

4

You can add new mime types to the mime library: https://github.com/elixir-plug/mime#usage

4 Likes
5

Hi Thanks Josevalim. Do you have any idea to customize the JSON format in the user controller?
In the json format i wanted to change the ā€˜tagsā€™ to ā€˜taggableā€™. Please advice me.

6

Just transform it in your controller. Do you have a specific example with code that is not working for you?

7

The api is working fine. But I just wanted to know how to change the name in the controller. If you have any example code, please provide.

8

The name of what though? Iā€™m not sure what you are trying to doā€¦?

9

To modify json output, You may want to look at Poison and @derive option. You can also implement your own poison encoder.

But to keep it simple, it is also possible not to use

json(conn, %{user: user})

and use the view with

conn |> render(ā€œwhatever.jsonā€, user: user)

Then, in the corresponding view/action, You can customize your json outputā€¦

def render("whatever.json", %{user: user}), do: %{user: user_json(user)}

defp user_json(user), do: %{whatever_id: user.id, whatever_you_name: user.name, taggables: tags_json(user.tags)}

defp tags_json(tags) ... etc.

You can nest association, and use a custom to_json function for tags, where You can use taggables instead of tags.

UPDATE: I just noticed @PatNowak is advising the same use of custom view, some posts above, sorry for duplication

10

Thanks for your reply. I have updated the code and getting an error.

ArgumentError at GET /api/v1/users

Exception:

** (ArgumentError) argument error
    :erlang.apply([%VampDev.User{__meta__: #Ecto.Schema.Metadata<:loaded, "users">,

The user view file:
defmodule VampDev.UserView do
use VampDev.Web, :view

def render("index.json", %{user: user}) do
user_json(user)
end

defp user_json(user) do
%{id: user.id, name: user.name, taggables: tags_json(user.tags)}
end

defp tags_json(tags) do
%{id: tags.id, name: tags.name}
end

end

User controller file

web/models.user_controller.ex

defmodule VampDev.UserController do
use VampDev.Web, :controller

def index(conn, _params) do

user =
  VampDev.User
  |> Repo.all()
  |> Repo.preload(:tags)

  render conn, user: user
  
  end

end

How to fix this issue? :frowning:

1 Like
11

I think tags is a collection, not an elementā€¦

You should have a defp tag_json for one tag element, and tags_json mapping through tags, returning a list.

1 Like
12

Something like thisā€¦ (not tested)

defp tags_json(tags) do
  tags |> Enum.map(&tag_json(&1))
end

defp tag_json(tag) do
  %{id: tag.id, name: tag.name}
end

BTW If You are not really modifying the output, You can also use Map.from_struct

Like so

tag |> Map.from_struct

1 Like
13

Thanks for your reply.

Actually the user_json function itself not working. I can not get the separate the id and name

defmodule VampDev.UserView do
use VampDev.Web, :view

def render("index.json", %{user: user}) do
user_json(user)
end

defp user_json(user) do
%{id: user.id, name: user.name}
end

end

1 Like
14

Reading your code I see that user is also a collection, it is a list of usersā€¦

As seen hereā€¦

VampDev.User
  |> Repo.all()

So proceed the same, with a users_jsonā€¦

1 Like
15

Sorry i donā€™t get you. could you please give me example ?

1 Like
16

In your controller

def index(conn, _params) do
  users =
  VampDev.User
  |> Repo.all()
  |> Repo.preload(:tags)
  render conn, users: users
end

In your view

def render("index.json", %{users: users}) do
  %{users: users_json(users)}
end

defp users_json(users) do
  users |> Enum.map(&user_json(&1))
end

defp user_json(user) do
  %{id: user.id, name: user.name}
end

In the index action of a resource controller, You expect to receive a collection of users. It is in the show action You get only one user.

1 Like
17

Thank you so much. :+1:

1 Like