在使用Ajax和Laravel时，需要帮助来循环从DB获取的Json数据响应的内容

Question

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

我尝试用控制台记录来自我的控制器的JSON成功响应，我看到了查询的结果，所以我使用Js append功能将数据追加到我的index.blade上的一个div中，但是它返回的主题:[object object]，[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”持续时间：5 id:7标题：“My Porfolio Adesanya Folorunso”track_id:44 updated_at:“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，主题->Title和Duration。非此主题:[object object]、[object object]

Answer 1

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

null

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>