在使用Ajax和Laravel时，需要帮助循环从DB获取的Json数据响应的内容
在使用Ajax和Laravel时，需要帮助循环从DB获取的Json数据响应的内容
提问于 2019-07-31 05:35:00
我有一个包含主题列表的表，每个主题都有自己的主题，所以我编写了一个ajax脚本，使用主题id "onclick“获取主题的每个主题的主题。
我尝试在控制台上记录来自我的控制器的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，主题->标题和持续时间。不是本主题:对象对象，对象对象
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-07-31 07:17:24
我假设您的数据如下所示。如果是这样，用我的循环代码替换你的循环代码。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57280341
复制相关文章
相似问题
腾讯云开发者
