遍历包含多个数组的数组

Question

试图做到这一点，以便JS脚本从数据库中加载注释。 这是当前设置。 控制器

public function loadComment(Request $request){
         $comment=Comment::all();
         //echo json_encode($comment);
         //exit;
         return json_encode($comment);
}

路线

Route::get('/tip/select/grabcomments','TipController@loadComment');

刀片片段

                     <h3>Comments</h3>
                     <form onsubmit="addComment(event);">
                         <input type="text" placeholder="Add a comment" name="text" id="text" required>
                         <input type="hidden" name="tip_id" id="tip_id" value="{{$val->tip_id}}">
                         <input type="hidden" name="username" id="username" value="{{Auth::user()->name}}">
                         <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">
                         <button id="addCommentBtn">Comment</button>
                     </form>
                     <div class="alert" id="alert" style="display: none;"></div>
                     <br>
                     <div id="comments">
                         @foreach($comments as $comment)
                             <div>
                                 <small>{{ $comment->username }}</small>
                                 <br>
                                 {{ $comment->text }}
                             </div>
                         @endforeach
                     </div>
                     <!--jQuery script used to be here -->
                     <script>
                     //Attempt to load comments from DB
                     $(document).ready(function(){
                       $.ajax({
                         url: '/tip/select/grabcomments',
                         type: 'get',
                         //dataType: 'json',
                         success: function(response) {
                            var x;
                            for (x in response){
                             let $comment = $('<div>').text(x['body']).prepend($('<small>').html(x['username'] + "<br>"));
                             $('#comments').prepend($comment);
                           }

                         }
                       });
                     });

ajax通过了什么

[{"id":1,"user_id":485,"username":"teambravo","tip_id":1,"body":"dsd","created_at":"2019-07-26 15:11:18","updated_at":"2019-07-26 15:11:18","deleted_at":null,"approved":null},
{"id":2,"user_id":485,"username":"teambravo","tip_id":1,"body":"dsd","created_at":"2019-07-26 15:13:51","updated_at":"2019-07-26 15:13:51","deleted_at":null,"approved":null},
{"id":3,"user_id":485,"username":"teambravo","tip_id":1,"body":"adadada","created_at":"2019-07-26 15:14:19","updated_at":"2019-07-26 15:14:19","deleted_at":null,"approved":null},
{"id":4,"user_id":485,"username":"teambravo","tip_id":1,"body":"adadada","created_at":"2019-07-26 15:31:25","updated_at":"2019-07-26 15:31:25","deleted_at":null,"approved":null}]

结果是，用户名正确地放置在用户进行的每个注释的注释下，但是其余数据只是说“未定义”。

更新1 一直在尝试修改JS脚本部分本身，因为似乎所有需要的信息都已成功地从数据库中获取。这是我的两次尝试（这些进入sucess: function(response) { ... 尝试1

for(let i=0;i<response.length;i++){
   let childArray=response[i];
   for(let j=0;j<childArray.length;j++){
let $comment=$('<div>').text(childArray[body]).prepend($('<small>').html(childArray[username] + "<br>"));
      $('#comments').prepend($comment);

Attempt2

var vals=[];
for(var i=0;i<response.length;i++){
 vals.push(response[i].val);}
 for(var j=0;response.length;j++){
let $comment = $('<div>').text(j['body']).prepend($('<small>').html(j['username'] + "<br>"));
  $('#comments').prepend($comment);

更新2 当前，这会在参数列表后给出“缺少）”

 $(document).ready(function(){
                       $.ajax({
                         url: '/tip/select/grabcomments',
                         type: 'get',
                         //dataType: 'json',
                         success: function(response){
                           var vals=[];
                           for(var i=0;i<response.length;i++){
                             vals.push(response[i].val);
                           }
                           console.log(response);
                             for(var j=0;response.length;j++){
                               let $comment = $('<div>').text(response[j].body).prepend($('<small>').html(response[j].username + "<br>"));
                               $('#comments').prepend($comment);
                             }
                           }

                           /*
                            for(let i=0;i<response.length;i++){
                              let childArray=response[i]//.child;
                              for(let j=0;j<childArray.length;j++){
                                let $comment = $('<div>').text(childArray[body]).prepend($('<small>').html(childArray[username] + "<br>"));
                                //let $comment = $('<div>').text(childArray['body']).prepend($('<small>').html(childArray['username'] + "<br>"));
                                $('#comments').prepend($comment);
                              }

                           }
                           */
                         }
                       }));

更新3 这似乎加载了注释（最终），但似乎我创建了一个无限循环。如果有人可以浏览一下并帮助我解决问题，我将不胜感激。

function loadComments(){
                       $.ajax({
                         url: '/tip/select/grabcomments',
                         type: 'get',
                         dataType: 'json',
                         success: function(response){
                           let vals=[];
                           for(var i=0;i<response.length;i++){
                             vals.push(response[i].val);
                           }
                             for(var j=0;j<response.length;j++){
                               let $comment = $('<div>').text(response[j].body).prepend($('<small>').html(response[j].username + "<br>"));
                               $('#comments').prepend($comment);
                             }
                           }
                         });
                     }


                    $(document).ready(loadComments);