rahil627

rahil627

greetings. first post/question. sorry to even bother anyone.

i started a project with a lot of generated code, but i’m still having trouble hooking things up (router, context, view), all-the-while learning the framework 'n language. I feel like i’m getting closer to the learning curve’s edge and finding the promised productive-land, so i don’t want to give up yet, but something here just doesn’t seem right to me..:

i’ve got two similar errors that error on core_components.ex. the browser displays these errors:

KeyError at GET /games/1
key :item not found in: %{
  __changed__: nil,
  inner_block: [
    %{
      __slot__: :inner_block,
      inner_block: #Function<8.124877290/2 in GameArchiveWeb.GameHTML.show/1>
    }
  ],
  __given__: %{
    __changed__: nil,
    inner_block: [
      %{
        __slot__: :inner_block,
        inner_block: #Function<8.124877290/2 in GameArchiveWeb.GameHTML.show/1>
      }
    ]
  }
}

and

KeyError at GET /games
key :col not found in: %{
  id: "games",
  rows: [
    %GameArchive.Game{
      __meta__: #Ecto.Schema.Metadata<:loaded, "games">,
      id: 1,
      title: "test",
      alt_titles: ["string 1", "string 2"],
      makers: ["string 1", "string 2"],
      ...
      (LIST ALL Game ROWS FROM DB)
      ...
action: [
      %{
        __slot__: :action,
        inner_block: #Function<30.124877290/2 in GameArchiveWeb.GameHTML.index/1>
      },
      %{
        __slot__: :action,
        inner_block: #Function<31.124877290/2 in GameArchiveWeb.GameHTML.index/1>
      }
    ],
    __changed__: nil,
    inner_block: [
      %{
        __slot__: :inner_block,
        inner_block: #Function<29.124877290/2 in GameArchiveWeb.GameHTML.index/1>
      }
    ],
    row_click: #Function<28.124877290/1 in GameArchiveWeb.GameHTML.index/1>
  },
  __changed__: nil,
  inner_block: [
    %{
      __slot__: :inner_block,
      inner_block: #Function<29.124877290/2 in GameArchiveWeb.GameHTML.index/1>
    }
  ],
  row_click: #Function<28.124877290/1 in GameArchiveWeb.GameHTML.index/1>,
  row_id: nil,
  row_item: &Function.identity/1
}

in core_components.ex:

<div :for={item <- @item} class="flex gap-4 py-4 text-sm leading-6 sm:gap-8">
# and
<th :for={col <- @col} class="p-0 pb-4 pr-6 font-normal"><%= col[:label] %></th>

it seems to me the core_components html template is using/expecting my database schema to have a field named col and item, but that can’t be right.., can it??

my Games.ex (confusing name, i kno) context

  def list_games do
    Repo.all(Game) # i think this selects all by default..
  end

  def get_game!(id) do
    Repo.get(Game, id)
  end

router.ex

    resources "/games", GameController # macro magicks

phew… i hope that’s everything to understand the problem.. there’s just so much abstraction..!

i used a lot of generation stuff: schema first, then html (–no-schema), but the gen’d context file was unimplemented (raise TODO), so i tried to implement it (with the help of docs/context), and now i’m just going through a bunch of errors to get things to work..

again, sorry to bother. I’m thinking maybe it would have been a smoother experience to simply use phx.gen.html to gen everything (schema, context, html, router?) at the same time..

First 3 of 3 Posts Switch mode

garrison

garrison

The KeyErrors are telling you that :item and :col are not found in the assigns map passed to the function components (in this case the table/1 and list/1 components in core_components.ex). You can tell it’s an assigns map because it has keys like __changed__ which are used by LiveView to track changes. Assigns are used like @item in your HEEx templates but they are converted into map operations by the compiler.

In this case, the assigns in question are actually slots which are passed in as assigns by LiveView. The problem is that the @item and @col assigns haven’t been set (you can see in the error message that they are missing from the assigns map), which will happen if you haven’t included any <:col></:col> or <:item></:item> slots in your tables and lists. These are required slots, so they don’t get a default value - you have to provide them.

Missing required slots also emit a compile-time warning telling you that they’re missing - if you check your console output after compilation (or you have inline warnings in your editor) then you should see them.

rahil627

rahil627 OP

phew, thank you so much!! i’m sure i’ll figure more things out while slowly digesting all of this…

you are right about the warnings:

    warning: missing required slot "col" for component GameArchiveWeb.CoreComponents.table/1
    │
 10 │ <.table id="games" rows={@games} row_click={&JS.navigate(~p"/games/#{&1}")}>
    │ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    │
    └─ lib/game_archive_web/controllers/game_html/index.html.heex:10: (file)

    warning: missing required slot "item" for component GameArchiveWeb.CoreComponents.list/1
    │
 11 │ <.list>
    │ ~~~~~~~
    │
    └─ lib/game_archive_web/controllers/game_html/show.html.heex:11: (file)

habits from other languages/compilers made me overlook/ignore warnings. I only had 3. I’ll def keep an eye on them from now on, and look there first, as opposed to the errors on the web-page.

rahil627

rahil627 OP

YESSSSSSS. thank you @garrison!!! i can see the page. i can seee the light!

after some random googling around how tables 'n lists are supposed to look like, i’ve got this working in the index.html.heex and show.html.heex files:

# added the col(umns) to the top of the table body
<.table id="games" rows={@games} row_click={&JS.navigate(~p"/games/#{&1}")}>
  <:col :let={game} label="id"><%= game.id %></:col>
  <:col :let={game} label="title"><%= game.title %></:col>
  # ...

# this list was previously empty!
<.list>
  <:item title="id"><%= @game.id %></:item>
  <:item title="title"><%= @game.title %></:item>
  <:item title="alt_title"><%= @game.alt_titles %></:item>
  <:item title="makers"><%= @game.makers %></:item>
  # ...
</.list>

it was working for a whole minute, until it wasn’t:

no "index" html template defined for GameArchiveWeb.GameHTML  (the module does not exist)

lol, on to the next error. thanks again tho!

edit: fixed the last error by removing the _build folder.. :confused: (no code was changed)

— All posts loaded —

Where Next? Top

Trending in Questions Top

stjefim
Hello! Suppose you are building workflow (order / task / payment) processing system with the following requirements: Each workflow con...
New
jonnycharles
I’m in search of an Elixir library that offers PDF generation capabilities similar to Ruby’s Prawn. While there have been discussions abo...
New
spammy
I’m looking to build a personal workflow to quickly deploy web applications written in elixir/phoenix, for local consumption (ie not on t...
New
dli
Before I dive in myself, did anyone successfully sprinkle Hologram into their existing LiveView app? Looking for hints regarding: Addi...
New
roeland
Kia ora, We have been using elixir-google-api to connect to Google Drive. However, with the updates to Tesla due to CVEs this is now bro...
New
bottlenecked
Hi all, I wanted to ask how the community is dealing with post-release steps. Today we have Ecto migrations, which make sure that the db...
New
rahultumpala
Hello, I have an Elixir backend that implements a custom protocol over TCP. I want to load test the backend and assess the performance o...
New

Other Trending Topics Top

JesseHerrick
Hey, I’m Jesse and I’m the main contributor behind Dexter, a full-featured, lightning-fast Elixir LSP optimized for large codebases. It s...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge &amp; Solve. They are GUI (Emerge) and State management (S...
New
netoum
Corex is an accessible, unstyled UI component library for Phoenix that integrates Zag.js state machines using Vanilla JavaScript and Live...
New
ausimian
Emily is an Elixir library that runs Nx computations on Apple’s MLX. Install it as the default Nx backend and Nx, defn, Axon, Nx.Serving,...
New
wintermeyer
There are three potential reasons for members of this forum to have a look at https://vutuv.de You are tired or annoyed of LinkedIn. Yo...
New

We're in Beta

About us Mission Statement