jdsutherland
Modern Front-End Development for Rails: B7 pg 164 server JSON ids are numbers causing javascript Array#includes to always return false
After completing the section Using Data in Stimulus (ends pg 167), I noticed something wrong with Ajax updates. After running the rake task to sell out concerts, things looked fine on initial browser load:
but after Ajax it would change from “Sold Out” to “0 Tickets Remaining”:
The data attributes looked like this:
So concertSoldOutValue was suspiciously being set to false. The issue is that Array#includes is called with a string on an array of numbers (always false):
concertElement.dataset.concertSoldOutValue = soldOutConcertIds.includes(
concertElement.dataset.concertIdValue
)
typeof soldOutConcertIds[0]: number
The ids coming from the server JSON are numbers. One solution is to convert the ids to a string:
class SoldOutConcertsController < ApplicationController
def show
concerts = Concert.includes(:venue, gigs: :band).all
sold_out_concert_ids = concerts
.select(&:sold_out?)
.map(&:id)
.map(&:to_s)
render(json: {sold_out_concert_ids: sold_out_concert_ids})
end
end
Perhaps TypeScript could be leveraged to prevent this kind of bug?
First Post!
noelrappin
Author of Modern Front-End Development for Rails
This is a really great catch, I’ll fix it in the next update.
Popular Pragmatic Bookshelf topics
This test is broken right out of the box…
— FAIL: TestAgent (7.82s)
agent_test.go:77:
Error Trace: agent_test.go:77
agent_test.go:...
New
Running the examples in chapter 5 c under pytest 5.4.1 causes an AttributeError: ‘module’ object has no attribute ‘config’.
In particula...
New
Title: Hands-On Rust (Chap 8 (Adding a Heads Up Display)
It looks like
.with_simple_console_no_bg(SCREEN_WIDTH*2, SCREEN_HEIGHT*2...
New
Title: Intuitive Python: docker run… denied error (page 2)
Attempted to run the docker command in both CLI and Powershell
PS C:\Users\r...
New
Title: Web Development with Clojure, Third Edition, vB17.0 (p9)
The create table guestbook syntax suggested doesn’t seem to be accepted ...
New
#book-python-testing-with-pytest-second-edition
Hi. Thanks for writing the book. I am just learning so this might just of been an issue ...
New
I’m not quite sure what’s going on here, but I’m unable to have to containers successfully complete the Readiness/Liveness checks. I’m im...
New
Is the book’s epub format available to read on Google Play Books?
New
It seems the second code snippet is missing the code to set the current_user:
current_user: Accounts.get_user_by_session_token(session["...
New
Hi all,
currently I wonder how the Tailwind colours work (or don’t work).
For example, in app/views/layouts/application.html.erb I have...
New
Other popular topics
Stop developing web apps with yesterday’s tools. Today, developers are increasingly adopting Clojure as a web-development platform. See f...
New
I am thinking in building or buy a desktop computer for programing, both professionally and on my free time, and my choice of OS is Linux...
New
I’ve been hearing quite a lot of comments relating to the sound of a keyboard, with one of the most desirable of these called ‘thock’, he...
New
Oh just spent so much time on this to discover now that RancherOS is in end of life but Rancher is refusing to mark the Github repo as su...
New
Rails 7 completely redefines what it means to produce fantastic user experiences and provides a way to achieve all the benefits of single...
New
Author Spotlight
Rebecca Skinner
@RebeccaSkinner
Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New
Author Spotlight:
Peter Ullrich
@PJUllrich
Data is at the core of every business, but it is useless if nobody can access and analyze ...
New
Big O Notation can make your code faster by orders of magnitude. Get the hands-on info you need to master data structures and algorithms ...
New
Get the comprehensive, insider information you need for Rails 8 with the new edition of this award-winning classic.
Sam Ruby @rubys
...
New
This is a very quick guide, you just need to:
Download LM Studio: https://lmstudio.ai/
Click on search
Type DeepSeek, then select the o...
New
Latest in Modern Front-End Development for Rails
Categories:
Sub Categories:
Popular Portals
- /elixir
- /rust
- /wasm
- /ruby
- /erlang
- /phoenix
- /keyboards
- /python
- /js
- /rails
- /security
- /go
- /swift
- /vim
- /clojure
- /java
- /emacs
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /elm
- /flutter
- /vscode
- /ash
- /html
- /opensuse
- /deepseek
- /zig
- /centos
- /php
- /scala
- /react-native
- /lisp
- /textmate
- /sublime-text
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /ubuntu
- /spring
- /revery
- /manjaro
- /lua
- /julia
- /diversity
- /markdown
- /slackware











