Phoenix Controller: Matching on content-type

Questions & Help Questions
, ,
1

Hi there,

I have a controller with an action that renders some html. Now I want to extend that action to render some json when the content type is application/json*

I was hoping I could use pattern matching to achieve this, but this does not work (the html action always gets executed):

  def index(%{req_headers: [{"content-type", "application/json"}]} = conn, _params) do
    json(conn, %{some: "response"})
  end

  def index(conn, _params) do
    render(conn, "index.html")
  end

This does work:

  def index(conn, _params) do
    headers = Enum.into(conn.req_headers, %{})

    if headers["content-type"] == "application/json" do
      json(conn, %{some: "response"})
    else
      render(conn, "index.html")
    end
  end

Is there a cleaner to achieve this?

Thanks!

2

The “Content-Type” header describes the payload of the client’s request. The response format is normally negotiated based on the client’s “Accept” header and the server’s capabilities.

See:

In a standard Phoenix application you should already have something like plug :accepts, ["html"] in one of your router’s pipelines. You can update it to ["html", "json"], make sure your client sends the correct “Accept” header and check get_format(conn) when choosing what to render.

BTW, the reason pattern matching does not work is because it will only match a list where the only element is {"content-type", "application/json"}, which is never the case.

3

index is usally called on a GET request, and setting a content-type header does not make much sense there.

Besides of that, you match on a list that has exactly one element. This is unlikely to be true for any list of headers.

Also I’m seconding @voltone, that you probably want to check for the "accept" header instead and leverage plugs that are already available.

4

Another option you have is to define a render function for both an index.html and an index.json and then just pass the action’s atom to the render function in your controller. In other words instead of having render(conn, "index.html"...), you’ll have render(conn, :index...). Here’s an example from one of my apps:

card_controller.ex:

  #...
  def index(conn, _params) do
    cards = Task.list_cards()
    render(conn, :index, cards: cards)
  end
  #...
  def show(conn, %{"id" => id}) do
    card = Task.get_card!(id)
    render(conn, :show, card: card)
  end
  #...

With this in place, Phoenix will look for the appropriate (view) render function or template for each content type. You could have an index.html.eex, an index.json.eex, an index.xml.eex and even more options all in the same template directory.

What I often do with JSON is just define a render function directly in the view instead of making a template, since it’s so short and Phoenix will automatically use Jason (or whichever encoder you’ve configured) to encode your data properly.

card_view.ex:

defmodule MellowWeb.CardView do
  use MellowWeb, :view

  def render("index.json", %{cards: cards}), do: cards
  def render("show.json", %{card: card}), do: card
end

As @voltone pointed out, you’ll need to make sure your router plug accepts includes JSON and then Phoenix will honor the Accept header coming from the front end.

Using axios (or Vue.axios in my case), you can do that with the headers field like this:

Vue.axios({
  method: "POST",
  url: "/cards",
  data: data,
  headers: { Accept: "application/json" }
})
5

Maybe this post can help too. It allows to use suffix for routes.

6

Thank you everybody for your answers!
I tried two approaches:

The first one involved a plug that called get_format and put its output to the private map. This lets me pattern match on the format like i originally imagined:

defmodule AkediaWeb.Plugs.PlugFormat do
  import Plug.Conn, only: [put_private: 3]
  import Phoenix.Controller, only: [get_format: 1]

  def put_req_format(conn, opts) do
    put_private(conn, :plug_format, get_format(conn))
  end
end

..

def index(%{private: %{plug_format: "html"}} = conn, params) do
# html response
end

def index(%{private: %{plug_format: "json"}} = conn, params) do
# json response
end

The approach as outlined by @AlchemistCamp ended up being more appealing to me because all I had to do was adding the json render function to the view and changing the render function in the controller:

# from 
render(conn, "show.html", user: user)
# to
render(conn, :show, user: user)