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

Posted 2021-04-07

使用带有laravel后端的fullcalendar jquery插件。我无法迭代并显示下面嵌套对象的属性[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>');
              }
              })

答案

这是因为您在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对象中的“leader”是一个数组，因此在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);
}

附：你也有$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。