uncaught reference error, notification not defined

Question

I am trying to add notifications to my rails app. Basically I get them from a JSON endpoint and I try to fetch them and append them to my html using some CoffeescriptHere's the JSON array. The problem is in the handleSuccess method where I get uncaught reference error, notification not defined

notifications.js.coffee

 class Notifications
  constructor: ->
   @notifications = $("[data-behavior='notifications']")
   @setup() if @notifications.length > 0

  setup: ->
   $.ajax(
      url: "/notifications.json"
      dataType: "JSON"
      method: "GET"
      success: @handleSuccess
    )

  handleSuccess: (data) =>
   console.log(data)
   items = $.map data, (notification) ->
      "<a class='dropdown-item' href='#{notification.url}'># 
      {notification.action} #{notification.notifiable.type}</a>"

jQuery ->
 new Notifications

WHAT I get from localhost:3000/notifications.json

[{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/10#list_10"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"},{"actor":"emanuelcoen","action":"liked","notifiable":{"type":"your list"},"url":"/lists/17#list_17"}]

Answer 1

You have an indentation error in the function you are passing to your $.map. The string below it has to be indented, otherwise it assumes you are passing an empty function to map, and the line after it raises an error as notification isn't defined.

  handleSuccess: (data) =>
   console.log(data)
   items = $.map data, (notification) ->
     "<a class='dropdown-item' href=''>#{notification.actor}</a>"

---

Update

Regarding your comment that the notifications aren't showing on the page - you aren't calling any code to add the html string you are generating to the DOM. You could use $.append for this.

  handleSuccess: (data) =>
   console.log(data)
   for notification in data
     @notifications.append(
       "<a class='dropdown-item' href=''>#{notification.actor}</a>")

There is no need to use $.map over the notifications array as we are just rendering them in another loop, so I replaced it with a single Coffeescript comprehension.