javascript - 在使用 Ajax 和 Laravel 时需要帮助循环出从数据库中获取的 Json 数据响应的内容

Question

我有一个包含主题列表的表格，每个主题都有自己的主题，所以我编写了一个 ajax 脚本来获取每个主题的主题“onclick”主题，使用主题 ID。

我尝试控制台记录来自控制器的 JSON 成功响应，我看到了查询的结果，所以我使用 Js 附加功能将数据附加到我的 index.blade 上的 div 但它返回的主题：[object Object]，[对象对象]

Ajax 请求显示所选主题的主题 track_id 表示 subject_id

$( ".show-topics" ).click(function() {
    var track_id= $(this).data('id');
    var html ='';

    $.ajax({
        type: "GET",
        dataType: "json",
        url: 'showTopics',
        headers: {'X-CSRF-TOKEN': '{{ csrf_token() }}' },
        data: {'id': track_id},
        success: function(data)
        {
            // For loop statement to loop out the data```
            if(data.topics)
            {
                for(var key in data)
                {   
                    var value = data[key];
                    html+='<div>'+key+':'+value+'</div>'
                }
                $("#topic-data").append(html);
            }
        }
    });
});

在我的控制器中，我将此作为我的 showtopics 方法```

public function showTopics(Request $request)
{ 
    $topics = Topic::where('track_id', $request->id)->latest()->get();
    return response()->json(['topics' => $topics]);
}

div 追加这些数据：

<div id="topic-data">
</div>

当我 console.log(data.topics) 得到这个时，(2) [{...}, {...}] 0: created_at: "2019-07-29 18:04:32" duration: 5 id: 7 title: "My Porfolio Adesanya Folorunso" track_id: 44 更新时间：“2019-07-29 18:04:32”

1： created_at：“2019-07-29 18:04:11” 持续时间：2 id：6 标题：“Adesanya Folorunso” track_id：44 updated_at：“2019

我想显示主题-> id、主题-> 标题和持续时间。不是这个主题：[object Object],[object Object]

标签： javascriptajaxlaraveleloquentlaravel-5.8

Answer 1

我假设您的数据如下所示。如果是这样，用我的替换你的循环代码......

var data = 
{
    "topics":
    [
        {
            "created_at":"2019-07-29 18:04:32",
            "duration":5,
            "id":7,
            "title":"My Porfolio Adesanya Folorunso",
            "track_id":44,
            "updated_at":"2019-07-29 18:04:32"
        },
        {
            "created_at":"2019-07-29 18:04:11",
            "duration":2,
            "id":6,
            "title":"Adesanya Folorunso",
            "track_id":44,
            "updated_at":"2019-07-30 19:04:21"
        }
    ]
};

if(data.topics)
{
  for(var i=0; i < data.topics.length; i++)
  {
    $("#topic-data").append( $("<div />").text(data.topics[i].created_at) );
    $("#topic-data").append( $("<div />").text(data.topics[i].duration) );
    $("#topic-data").append( $("<hr />") );
  }
}
         

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topic-data">
</div>