Not hitting debugger in Javascript/JQuery

Question

I am currently having some difficulty hitting my third debugger breakpoint in my Javascript, Rails, JQuery application. It hits the first two just fine, but is not hitting the third. Does anyone see why this might be the case? Thanks in advance! Here is the code that I am working with:

user_index.js

 $(document).ready(function () {

    $(".loadCars").click(function(event) {
    event.preventDefault()
        var url = this.href
    debugger
    $.getJSON(url)
    .success(function(data) {
        $('#cars').html("");
      debugger
        $.each(data, function(index, value) {
            var newCar = new Car(value, url);

            var carHtml = newCar.formatDisplay();
              $('#cars').append(carHtml)

        debugger
            });

      });
    });
});

function Car(car, url) {
    this.id = car.id
    this.make = car.make
    this.model = car.model

    this.awards = car.awards
};

Car.prototype.formatDisplay = function() {
    var awardsHtml = ""
    $.each(this.awards,function() {
        var awardListItem = this.formatDisplay()
        awardsHtml += awardListItem
    });
    var carHtml = `<div><a href='${this.carUrl}'>${this.make} + " " + ${this.model} </a></div>
                                            <div>Awards:</div>
                                            <ul>${awardsHtml}</ul>`;
    return carHtml;
};

function Award(award) {
    this.id = award.id
    this.title = award.title
    this.description = award.description
};

Award.prototype.formatDisplay = function() {
    var awardHtml = `<li>Award: ${this.title}, Description: ${this.description}</li>`
    return awardHtml;
};

users_controller.rb

class UsersController < ApplicationController

  def new
    @user = User.new
  end

  def index
    @users = User.all
  end

  def show
    @user = current_user
    @cars = @user.cars
  end

  def destroy
    session.destroy
    redirect_to root_path
  end

  def cars_index
    @user = User.find(params[:id])
    @cars = @user.cars
    render template: 'cars/all'
  end

  def car_index
    @user = current_user
    @cars = @user.cars
    render json: @cars
  end

end

users/show.html.erb

<%= render 'layouts/header' %>
<h1>My Profile:</h1>
<h1><%= @user.email %></h1><br>

<button class="btn btn-default"><%= link_to "Load Cars", car_index_path(@user), :class => "loadCars" %></button><br><br>

<div class="cars">
  <ol>

  </ol>
</div>

<div id="cars">
  <ol>

  </ol>
</div>

Please let me know if there are any other code snippets that would be helpful in diagnosing the problem. Thank you!

Answer 1

It looks like the awards are not Award objects. You'll want to create Award objects to access those methods, like you do with Car objects.

function Car(car, url) {
    this.id = car.id;
    this.make = car.make;
    this.model = car.model;

    if (car.awards) {
        this.awards = car.awards.map(award => new Award(award));
    }
}