title: How to fix [object Object] and render from a has many relationship in Javascript?
body: <p>I'm working a show page with Ajax where I have an educational course rendered with the course instructor but Im getting [object Object] when trying to set the students of that particular course. I would like to render all the students for the course.</p>
  
  <p>I tried adding students as an attribute to the course serializer.</p>
  
  <pre><code>class CourseSerializer &lt; ActiveModel::Serializer
    attributes :id, :name, :instructor, :students
  
  
      has_many :ratings
      has_many :students, through: :ratings
  end
  </code></pre>
  
  <p>This is my click event.</p>
  
  <pre><code>$(document).on('click','.show_link',function(e) {
    e.preventDefault()
    $('.ajaxStyling').html('')
    let id = $(this).attr('data-id')
    fetch(`/courses/${id}.json`)
    .then(res =&gt; res.json())
    .then(course =&gt; {
      let newCourse = new Course(course)
      let courseHtml = newCourse.formatShow()
      $('.ajaxStyling').append(courseHtml)
    })
  })
  </code></pre>
  
  <p>Constructor function.</p>
  
  <pre><code>function Course(course) {
    this.id = course.id
    this.name = course.name
    this.instructor = course.instructor
    this.students = course.students
  }
  </code></pre>
  
  <p>Prototype function.</p>
  
  <pre><code>Course.prototype.formatShow = function () {
    let courseHtml = `
    &lt;a href="/courses/${this.id}" data-id="${this.id}"&gt;&lt;h3 class="showText"&gt;${this.name} by ${this.instructor}&lt;/h3&gt;&lt;/a&gt;
    ${this.students}.forEach(function(student) {
      return "&lt;p&gt;" + student.first_name + "&lt;/p&gt;"
    })
    `
    return courseHtml
  }
  </code></pre>
  
  <p>But Im getting the following error in page.</p>
  
  <p>This renders as a link which works as intended --> Adobe Analytics 201 by Adam Greco</p>
  
  <p>But the following is not right. Code rendered in page below the link above--> </p>
  
  <pre><code>[object Object],[object Object],[object Object].forEach(function(student) { 
  return "" + student.first_name + "" })
  </code></pre>
  
  <p>This is the data in my network request.</p>
  
  <pre><code>{id: 6, name: "Adobe Analytics 201", instructor: "Adam Greco",…}
  id: 6
  instructor: "Adam Greco"
  name: "Adobe Analytics 201"
  ratings: [{id: 29, rating: 2, course_id: 6, student_id: 11, created_at: "2019-05-23T00:54:22.813Z",…},…]
  students: [{id: 11, first_name: "Stefan", last_name: "Candelaria"}]
  0: {id: 11, first_name: "Stefan", last_name: "Candelaria"}
  1: {id: 12, first_name: "Robby", last_name: "Pasurin"}
  2: {id: 10, first_name: "Rafa", last_name: "Lopez"}
  </code></pre>