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

Question

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

我尝试控制台记录来自 Controller 的 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);
            }
        }
    });
});

在我的 Controller 中，我将此作为我的 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:创建时间:“2019-07-29 18:04:32”持续时间:5编号:7标题:“我的作品集 Adesanya Folorunso”轨道 ID:44更新时间:“2019-07-29 18:04:32”

1:创建时间:“2019-07-29 18:04:11”持续时间:2编号:6标题:《阿迪萨尼亚·弗洛伦索》轨道 ID:44更新时间:“2019

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

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>