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
page 37
ANTLRInputStream input = new ANTLRInputStream(is);
as of ANTLR 4 .8 should be:
CharStream stream = CharStreams.fromStream(i...
New
Page 28: It implements io.ReaderAt on the store type.
Sorry if it’s a dumb question but was the io.ReaderAt supposed to be io.ReadAt?
...
New
Hello! Thanks for the great book.
I was attempting the Trie (chap 17) exercises and for number 4 the solution provided for the autocorre...
New
When trying to generate the protobuf .go file, I receive this error:
Unknown flag: --go_opt
libprotoc 3.12.3
MacOS 11.3.1
Googling ...
New
Hi, I have just acquired Michael Fazio’s “Kotlin and Android Development” to learn about game programming for Android. I have a game in p...
New
The test is as follows:
Scenario: Intersecting a scaled sphere with a ray
Given r ← ray(point(0, 0, -5), vector(0, 0, 1))
And s ← sphere...
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,
I am getting an error I cannot figure out on my test.
I have what I think is the exact code from the book, other than I changed “us...
New
Docker-Machine became part of the Docker Toolbox, which was deprecated in 2020, long after Docker Desktop supported Docker Engine nativel...
New
Other popular topics
If it’s a mechanical keyboard, which switches do you have?
Would you recommend it? Why?
What will your next keyboard be?
Pics always w...
New
Design and develop sophisticated 2D games that are as much fun to make as they are to play. From particle effects and pathfinding to soci...
New
New
Tailwind CSS is an exciting new CSS framework that allows you to design your site by composing simple utility classes to create complex e...
New
This is going to be a long an frequently posted thread.
While talking to a friend of mine who has taken data structure and algorithm cou...
New
Author Spotlight
Jamis Buck
@jamis
This month, we have the pleasure of spotlighting author Jamis Buck, who has written Mazes for Prog...
New
Author Spotlight
Rebecca Skinner
@RebeccaSkinner
Welcome to our latest author spotlight, where we sit down with Rebecca Skinner, auth...
New
I have always used antique keyboards like Cherry MX 1800 or Cherry MX 8100 and almost always have modified the switches in some way, like...
New
If you’re getting errors like this:
psql: error: connection to server on socket “/tmp/.s.PGSQL.5432” failed: No such file or directory ...
New
Ok, well here are some thoughts and opinions on some of the ergonomic keyboards I have, I guess like mini review of each that I use enoug...
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
- /emacs
- /java
- /haskell
- /svelte
- /onivim
- /typescript
- /kotlin
- /c-plus-plus
- /crystal
- /tailwind
- /react
- /gleam
- /ocaml
- /elm
- /flutter
- /vscode
- /ash
- /html
- /opensuse
- /zig
- /centos
- /deepseek
- /php
- /scala
- /react-native
- /lisp
- /sublime-text
- /textmate
- /nixos
- /debian
- /agda
- /django
- /deno
- /kubuntu
- /arch-linux
- /nodejs
- /revery
- /ubuntu
- /manjaro
- /spring
- /lua
- /diversity
- /julia
- /markdown
- /c










