将fullcalendar jquery插件与laravel后端一起使用。我无法迭代并在下面显示嵌套对象的property [leader]的所有值。当我遍历该属性[leader]时,我只能显示一个值。如何遍历嵌套对象并将其所有值显示为FullCalendar上的事件?
//event object
$event_obj = [
{
"id":1,
"description":"A description",
"date":"2018-08-28",
"start_time":"10:00:00",
"end_time":"12:00:00",
"event_color":"#ffff00",
"location":[
{
"name":"Foo1"
},
{
"name":"Foo2"
}
],
"leader":[
{
"name":"Foo bar1"
},
{
"name":"Foo bar2"
}
]
}
]
$('#calendar').fullCalendar({
header: {
left: 'prev,next',
center: 'title',
right: 'month,agendaWeek'
},
firstDay: 1,
theme: true,
events : [
@foreach($event_obj as $ev_obj)
{
title : '{{ $ev_obj->location->name }}',
start : new Date('{{ $ev_obj->date }}T{{ $ev_obj->start_time }}') ,
color : ' {{ $ev_obj->event_color }}',
@if( !empty($event_obj->leader))
@foreach ($event_obj->leader as $key => $leader )
name_leader: '{{ $leader }}' ,
@endforeach
@endif
},
@endforeach
],
eventRender: function(event, element) {
element.find('.fc-title').append('<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">'+event.name_leader+'</span></div>');
}
})
答案 0 :(得分:0)
这是因为您在JS事件对象中两次定义了name_leader:
属性。由于@foreach ($event_obj->leader as $key => $leader )
循环的作用,您最终会得到
{
"title": "A description",
"start": "2018-08-28T10:00:00",
"color": "#ffff00",
"name_leader": "Foo bar1",
"name_leader": "Foo bar2",
}
请注意,有两个“ name_leader”属性。
现在,在eventRender
中,当您编写event.name_leader
时...计算机应该如何知道要使用的两个同名属性中的哪个?显然,它不能决定。您的对象无效。
由于PHP对象中的“领导者”是一个数组,因此在JS中,它也必须是一个数组。
我认为这样可以解决问题。在您的事件对象中:
leader: [
@if( !empty($event_obj->leader))
@foreach ($event_obj->leader as $key => $leader )
{ name: '{{ $leader }}' },
@endforeach
@endif
]
在eventRender中:
eventRender: function(event, element) {
if (event.leader.length > 0)
{
var html = '<div class="hr-line-solid-no-margin"></div><span style="font-size: 10px">';
for (var i = 0; i < event.leader.length; i++ )
{
html += (i > 0 ? ", " : "") + event.leader[i].name + ;
}
html += '</span></div>';
}
element.find('.fc-title').append(html);
}
P.S。 $ev_obj->location->name
还有一个逻辑问题-location
是一个列表,因此它不会直接具有“ name”属性。我希望您需要编写$ ev_obj-> location [0]-> name`才能起作用。
但是,老实说,除非您的PHP / Laravel事件数据已被用于其他用途,否则我不知道为什么您不只是将数据设置为fullCalendar的正确格式。离它不远。这样一来,您就不必为移调而烦恼了。
如果您这样创建事件对象:
$event_obj = [
{
"id":1,
"title":"Foo1",
"description":"A description"
"start":"2018-08-28T10:00:00",
"end":"2018-08-28T12:00:00",
"color":"#ffff00",
"location":[
{
"name":"Foo1"
},
{
"name":"Foo2"
}
],
"leader":[
{
"name":"Foo bar1"
},
{
"name":"Foo bar2"
}
]
}
]
然后在您的JS代码中您可以做到这一点(或类似的方式,我对Laravel模板语法的细节不熟悉,但希望您能理解):
events : @{{ json_encode($event_obj); }}
,然后再如上所示修改eventRender
。