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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了无法访问嵌套事件对象的属性 - Fullcalendar jquery插件相关的知识,希望对你有一定的参考价值。

使用带有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

以上是关于无法访问嵌套事件对象的属性 - Fullcalendar jquery插件的主要内容,如果未能解决你的问题,请参考以下文章

嵌套字典的类对象属性访问

Vue:访问错误对象中可能存在的嵌套属性的最佳方法

当从扩展符号访问对象时如何访问 Javascript 对象的嵌套按名称属性...?

如何访问 Angular 中嵌套对象的属性?

GraphQL 无法解析嵌套对象属性

无法从 json-server 获取嵌套的对象数组