Невозможно получить доступ к свойствам вложенного объекта события - плагин Fullcalendar jquery

Question

Использование полнофункционального jquery-плагина с внутренним интерфейсом laravel. Я не могу перебрать и отобразить все значения свойства [лидер] вложенного объекта ниже. Когда я перебираю это свойство [лидер], я могу отображать только одно значение. Как я могу перебрать вложенный объект и отобразить все его значения как событие в 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

Это потому, что вы определяете свойство name_leader: дважды в своем объекте события JS. Из-за цикла @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, как я показал выше.