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

【问题标题】：Unable to access properties of a nested event object - Fullcalendar jquery plugin无法访问嵌套事件对象的属性 - Fullcalendar jquery 插件
【发布时间】：2019-02-07 20:01:06
【问题描述】：

使用带有 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>');
              }
              })

【问题讨论】：

标签： jquery laravel fullcalendar

【解决方案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 对象中的“leaders”是一个数组，所以在你的 JS 中它也必须是一个数组。

我认为这将对其进行排序。在您的事件对象中：

leader: [
@if( !empty($event_obj->leader))
  @foreach ($event_obj->leader as $key => $leader )
    { name: '{{ $leader }}' },
  @endforeach
@endif
]

在事件渲染中：

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 是一个列表，因此它不会直接具有“名称”属性。我希望您需要编写 $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。

【讨论】：