Display table data from RethinkDB in Phoenix Framework - html

Question

I'm attempting to display data from my databases in RethinkDB (using the rethinkdb-elixir package from Hamiltop https://github.com/hamiltop/rethinkdb-elixir) in Phoenix. I'm relatively new to both, but I already managed to insert two tables and some data into those tables. I know this because I checked it through RethinkDB's web GUI.
Now I want to display table data in an html page of my project.
I've reduced the errors to one:
protocol Phoenix.HTML.Safe not implemented for %RethinkDB.Collection{data: [%{"first_name" => "Carlos", "id" => "4be8adc3-0973-45dc-bdb8-7a4dac6528d5", "last_name" => "Santos"}, %{"first_name" => "Carlos", "id" => "c84658fc-e4a4-4cb6-8107-b011ca996abd", "last_name" => "Santos"}, %{"first_name" => "Carlos", "id" => "c09fe081-379a-4334-97a3-31c5503c8c61", "last_name" => "Santos"}, %{"first_name" => "Carlos", "id" => "cf0c0ad3-3152-40f0-b613-5b051a314b51", "last_name" => "Santos"}, %{"first_name" => "Carlos", "id" => "ca28a714-ed54-4ebd-8707-d53170ead0f7", "last_name" => "Santos"}, %{"first_name" => "Carlos", "id" => "1ea77c0f-538c-4663-be92-499f16996594", "last_name" => "Santos"}, %{"first_name" => "Carlos", "id" => "1ea74846-0860-4ae5-95f5-674860cf7fc6", "last_name" => "Santos"}]}
Clearly it is fetching all the inserted Carlos Santos persons from the table (which I also must prevent but that is not my main issue) but having an error retrieving them to my Phoenix project.
I've got an index page in whose controller I create the tables and data.
Then I added a new page:
router.ex:
get "/users", UsersController, :users
/views/users_view.ex:
defmodule RethinkExample.UsersView do
use RethinkExample.Web, :view
end
users.html.eex:
<div class="jumbotron">
<p><%= #users %>!</p>
</div>
users_controller.ex
defmodule RethinkExample.UsersController do
use RethinkExample.Web, :controller
use RethinkDB.Query
def users(conn, _params) do
q = table("users")
|> filter(%{last_name: "Santos"})
|> RethinkExample.Database.run
|> IO.inspect
render conn, "users.html", users: q
end
end
I deduce that the html code is also incorrect, because this is how I would display the route specific id inside the html tags.
How can I fetch the data successfully and then display it in a html tag?

Answer 1

The problem here is that your data structure in #users is of type %RethinkDB.Collection{} (source) which cannot be output using <%=...%>
You will likely want to iterate over your users to output them. Something like:
<%= for user <- #users.data do %>
<p><%= "#{user["first_name"]} #{user["last_name"]}" %>!</p>
<% end %>
Here we are using a list comprehension to iterate over all the items on the #users.data array. This is a common way to output an array of elements (such as users, blog posts, comments, etc.) in EEx.
You might also want to consider passing q.data though as #users instead of q to prevent having to do #users.data.
As an aside, you can also use pattern matching inside the list comprehension:
<%= for %{"first_name" => first_name, "last_name" => last_name} <- #users.data do %>
<p><%= "#{first_name} #{last_name}" %>!</p>
<% end %>
This is useful if you don't plan on using many of the fields in the map.