jdsutherland

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:
image

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

noelrappin

Author of Modern Front-End Development for Rails

This is a really great catch, I’ll fix it in the next update.

Where Next?

Popular Pragmatic Bookshelf topics Top

New
johnp
Running the examples in chapter 5 c under pytest 5.4.1 causes an AttributeError: ‘module’ object has no attribute ‘config’. In particula...
New
joepstender
The generated iex result below should list products instead of product for the metadata. (page 67) iex&gt; product = %Product{} %Pento....
New
cro
I am working on the “Your Turn” for chapter one and building out the restart button talked about on page 27. It recommends looking into ...
New
jeremyhuiskamp
Title: Web Development with Clojure, Third Edition, vB17.0 (p9) The create table guestbook syntax suggested doesn’t seem to be accepted ...
New
jskubick
I’m running Android Studio “Arctic Fox” 2020.3.1 Patch 2, and I’m embarrassed to admit that I only made it to page 8 before running into ...
New
jskubick
I found an issue in Chapter 7 regarding android:backgroundTint vs app:backgroundTint. How to replicate: load chapter-7 from zipfile i...
New
New
rainforest
Hi, I’ve got a question about the implementation of PubSub when using a Phoenix.Socket.Transport behaviour rather than channels. Before ...
New
redconfetti
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 Top

AstonJ
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
PragmaticBookshelf
Learn from the award-winning programming series that inspired the Elixir language, and go on a step-by-step journey through the most impo...
New
ohm
Which, if any, games do you play? On what platform? I just bought (and completed) Minecraft Dungeons for my Nintendo Switch. Other than ...
New
dimitarvp
Small essay with thoughts on macOS vs. Linux: I know @Exadra37 is just waiting around the corner to scream at me “I TOLD YOU SO!!!” but I...
New
PragmaticBookshelf
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
mafinar
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
PragmaticBookshelf
Author Spotlight: VM Brasseur @vmbrasseur We have a treat for you today! We turn the spotlight onto Open Source as we sit down with V...
New
New
New
AnfaengerAlex
Hello, I’m a beginner in Android development and I’m facing an issue with my project setup. In my build.gradle.kts file, I have the foll...
New

Sub Categories: