Jason.Encoder not implemented phoenix

Can you post the code that triggers that error? schema uses defstruct as part of its implementation, so you’ll get a similar-sounding error if you write:

defstruct [:some_fields]
schema "items" do # <---- will try to defstruct as well

Side note:

  field :buttonId, :integer
  belongs_to :button, Button

This is likely not what you want - unless your table has both a buttonId and button_id column

belongs_to will call field with the value it’s given for foreign_key (or by adding _id on the end of the name if that’s not supplied)

The issue was in button_view.ex it was trying to load :items but could not. Now this one is solved by adding a render_many to the button render.

Now create and delete works. If I’m trying to get a single button e.g. localhost:4000/button/1 it’s returning the following error:

[debug] Processing with BuyButtonServiceWeb.ButtonController.show/2
  Parameters: %{"id" => "13"}
  Pipelines: [:api]
[debug] QUERY OK source="button" db=0.0ms idle=188.0ms
SELECT b0."id", b0."name", b0."userId", b0."inserted_at", b0."updated_at" FROM "button" AS b0 WHERE (b0."id" = $1) [13]
[error] #PID<0.473.0> running BuyButtonServiceWeb.Endpoint (connection #PID<0.472.0>, stream id 1) terminated
Server: localhost:4000 (http)
Request: GET /button/13
** (exit) an exception was raised:
    ** (Protocol.UndefinedError) protocol Enumerable not implemented for #Ecto.Association.NotLoaded<association :items is not loaded> of type Ecto.Association.NotLoaded (a struct)
        (elixir 1.11.2) lib/enum.ex:1: Enumerable.impl_for!/1
        (elixir 1.11.2) lib/enum.ex:141: Enumerable.reduce/3
        (elixir 1.11.2) lib/enum.ex:3461: Enum.map/2
        (buy_button_service 0.1.0) lib/buy_button_service_web/views/button_view.ex:19: BuyButtonServiceWeb.ButtonView.render/2
        (buy_button_service 0.1.0) lib/buy_button_service_web/views/button_view.ex:11: BuyButtonServiceWeb.ButtonView.render/2
        (phoenix 1.5.7) lib/phoenix/view.ex:472: Phoenix.View.render_to_iodata/3
        (phoenix 1.5.7) lib/phoenix/controller.ex:776: Phoenix.Controller.render_and_send/4
        (buy_button_service 0.1.0) lib/buy_button_service_web/controllers/button_controller.ex:1: BuyButtonServiceWeb.ButtonController.action/2
        (buy_button_service 0.1.0) lib/buy_button_service_web/controllers/button_controller.ex:1: BuyButtonServiceWeb.ButtonController.phoenix_controller_pipeline/2
        (phoenix 1.5.7) lib/phoenix/router.ex:352: Phoenix.Router.__call__/2
        (buy_button_service 0.1.0) lib/buy_button_service_web/endpoint.ex:1: BuyButtonServiceWeb.Endpoint.plug_builder_call/2
        (buy_button_service 0.1.0) lib/plug/debugger.ex:132: BuyButtonServiceWeb.Endpoint."call (overridable 3)"/2
        (buy_button_service 0.1.0) lib/buy_button_service_web/endpoint.ex:1: BuyButtonServiceWeb.Endpoint.call/2
        (phoenix 1.5.7) lib/phoenix/endpoint/cowboy2_handler.ex:65: Phoenix.Endpoint.Cowboy2Handler.init/4
        (cowboy 2.8.0) c:/Users/Van Tol/Documents/GitHub/Elixir/labs-buy-button-v2-service/deps/cowboy/src/cowboy_handler.erl:37: :cowboy_handler.execute/2
        (cowboy 2.8.0) c:/Users/Van Tol/Documents/GitHub/Elixir/labs-buy-button-v2-service/deps/cowboy/src/cowboy_stream_h.erl:300: :cowboy_stream_h.execute/3
        (cowboy 2.8.0) c:/Users/Van Tol/Documents/GitHub/Elixir/labs-buy-button-v2-service/deps/cowboy/src/cowboy_stream_h.erl:291: :cowboy_stream_h.request_process/3
        (stdlib 3.8) proc_lib.erl:249: :proc_lib.init_p_do_apply/3

Could this be the problem with the belongs_to relation? May you explain how to relate button table into items table.

Button migration:

defmodule BuyButtonService.Repo.Migrations.CreateButton do
  use Ecto.Migration
  alias BuyButtonService.Dashboard.Item, as: Item

  def change do
    create table(:button) do
      add :userId, :integer
      add :name, :string
      add :items, references(:items)

      timestamps([type: :utc_datetime])
    end
  end
end

Items migration:

defmodule BuyButtonService.Repo.Migrations.CreateItem do
  use Ecto.Migration

  def change do
    create table(:items) do
      add :buttonId, :integer
      add :ingredient, :string
      add :productId, :integer
      add :quantity, :integer

      timestamps([type: :utc_datetime])
    end
  end
end

If you read the stack trace, you can see that the first error it shows is this

** (Protocol.UndefinedError) protocol Enumerable not implemented for #Ecto.Association.NotLoaded<association :items is not loaded> of type Ecto.Association.NotLoaded (a struct) 

What this error is telling you is that you have fetched a button that has_many items, but you have not fetched the items. The Ecto.Association.NotLoaded struct is the default value if you have not preloaded your associations. To fix this you need to add a preload to your query or somewhere else before your view.

For my use case, I had a function that returned tuples, and I needed the tuples to render a chart.js chart.

So here’s what I did:

<canvas data-points={Jason.encode!(@daily_views)} id="laka-samboody" phx-hook="BarChart">
</canvas>

In my liveview:

def assign_daily_views(socket) do
  daily_views =
    socket.assigns.item
    |> Items.daily_views_for_past_days(30)
    |> Enum.map(&Tuple.to_list(&1)) # <---- Key fix here buddy!

  assign(socket, :daily_views, daily_views)
end

Now in Javascript I can access it:

export const BarChart = {
  mounted() {
    console.log(this.el.dataset.points);