Question

将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>');
              }
              })

Answer 1

这是因为您在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。

无法访问嵌套事件对象的属性-Fullcalendar jQuery插件

1 个答案: