Uncaught TypeError: Cannot read property 'forEach' of undefined が解決できません。

前提・実現したいこと

プログラミング初心者です。
簡易チャットアプリの自動更新機能実装中に下記のエラーが出ました。
色々試してはみたのですが、解決できませんでした。
どのように処理すればよいでしょうか。
ご教授願います。

発生している問題・エラーメッセージ

message.self-f3cc6115d57539aa4da77460c1d62a0e38fac2f32434ed27594fff56ef45788b.js?body=1:62 Uncaught TypeError: Cannot read property 'forEach' of undefined
    at Object.<anonymous> (message.self-f3cc6115d57539aa4da77460c1d62a0e38fac2f32434ed27594fff56ef45788b.js?body=1:62)
    at fire (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3233)
    at Object.fireWith [as resolveWith] (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:3363)
    at done (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:9841)
    at XMLHttpRequest.callback (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:10312)

該当のソースコード

js
1$(function() {
2  function buildHTML(message){
3    var addImage = '';
4    if (message.image.url) {
5      addImage = `<img src="${message.image.url}" class="lower-message__image">`;
6    }
7    var html = `
8        <div class="message" data-message-id="${message.id}">
9          <div class="upper-message" data-message-id="${message.id}">
10            <div class="upper-message__user-name">${message.name}</div>
11            <div class="upper-message__date">${message.date}</div>
12          </div>
13          <div class="lower-message">
14            <p class="lower-message__content">
15              ${message.content}
16            </p>
17            ${addImage}
18          </div>
19        </div>`;
20    return html;
21  }
22
23  $('.new_message').on('submit', function(e) {
24    e.preventDefault();
25    var formdata = new FormData(this);
26    $.ajax({
27      url: location.href,
28      type: 'POST',
29      data: formdata,
30      dataType: 'json',
31      contentType: false,
32      processData: false
33    })
34    .done(function(message) {
35      var html = buildHTML(message);
36      $('.messages').append(html)
37      $('.form__message').val('');
38      $('.form__submit').prop('disabled', false);
39      $('.messages').animate({scrollTop: $('.messages')[0].scrollHeight}, 200);
40      $('.hidden').remove();
41    })
42    .fail(function(message) {
43      alert('メッセージを入力してください');
44      $('.form__submit').prop('disabled', false);
45    })
46  })
47
48  var reloadMessages = function() {
49    if (window.location.href.match(//groups/\d+/messages/)){  
50      var last_message_id = $('.message:last').data('message-id')
51      
52      $.ajax({
53        url: "api/messages",
54        type: 'get',
55        dataType: 'json',
56        data: {last_id: last_message_id}
57      })
58      
59      .done(function(messages) {
60        var insertHTML = '';
61
62        messages.forEach(function (message){
63          insertHTML = buildHTML(message);
64          $('.messages').append(insertHTML);
65        })
66        $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
67      })
68
69      .fail(function() {
70        console.log('error');
71      });
72    }  
73  };
74  setInterval(reloadMessages, 5000);
75});
76

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

class Api::MessagesController < ApplicationController
def index
@group = Group.find(params[:group_id])
@messages = @group.messages.includes(:user).where('id > ?', params[:last_id])
end
end

json.array! @messages do |message|
json.content message.content
json.image message.image
json.created_at message.created_at.strftime("%Y/%m/%d %H:%M")
json.name message.user.name
json.id message.id
end