2016-02-16 2 views
0

Сценарий jQuery, который считывает JSON-файл и помещает данные в DIV, показывает дату, но не местоположение, описание или ссылку.jQuery не читает экземпляры JSON

Пример набора JSON здесь:

{ 
"id": "[email protected]", 
"title": null, 
"events": [{ 
     "start": { 
     "date": null, 
     "time": "2016-02-16T10:00:00+01:00" 
     }, 
     "end": { 
     "date": null, 
     "time": "2016-02-16T11:00:00+01:00" 
     }, 
     "location": "Kreuzberg, Berlin, Germany", 
     "description": "Basketball Test", 
     "color_id": "1", 
     "ical_uid": "[email protected]" 
    } 

Существует скрипт JQuery здесь:

<script type="text/javascript"> 

(function(window, $) { 

    var CALENDAR_ENDPOINT ='http://antibang.com/js/berlinbraves/calendar/?tk=9832187dsamj__dsaj7321njdsa'; 

    var _leftCalendar, _rightCalendar; 

    function _parseEvents(eEventData) { 

     var converted, formatted; 

     converted = []; 

     eEventData.forEach(function(eItem) { 

      formatted = moment(eItem.start.time); 

      converted.push({ 

       date: formatted.format('YYYY-MM-DD'), 

       formatted_date: formatted.format('DD.MM.YY'), 
       formatted_time: formatted.format('HH:mm') + ' Uhr', 

       location: eItem.location, 
       description: eItem.description, 
       link: eItem.ical_uid, 
       category: eItem.color_id == null ? 'default' : eItem.color_id 

      }); 

     }); 

     return converted; 

    } 


    function _prepareDays() { 

     // hover over day cell 

     $('.clndr-event').hover(function() { 

      var $this; 

      $this = $(this); 

      $('#event-detail').show(); 

      $('#event-detail').removeClass(); 
      $('#event-detail').addClass('category-' + $this.data('category')); 

      $('#event-detail-date').text($this.data('date')); 
      $('#event-detail-loca').text($this.data('location')); 

      $('#event-detail').css('top', Math.round($this.offset().top)); 
      $('#event-detail').css('left', Math.round($this.offset().left)); 



     }, function() { 

      $('#event-detail').hide(); 

     }); 

    } 

Я не могу понять, почему Дата бы вынести, но местоположение, описание и ical_uid Wouldn» т?

календарь система используется в CLNDR, и данные были установлены в этом сценарии здесь:

<script type="text/template" id="template-calendar"> 

<div class="clndr-single"> 

    <div class="clndr-month"><%= month %> </div> 
     <div class="clndr-year"><%= year %> </div> 

    <div class="clndr-grid"> 

     <div class="days-of-the-week"> 

      <% _.each(daysOfTheWeek, function(day) { %> 
       <div class="header-day"><%= day %></div> 
      <% }); %> 

      <div class="days"> 

       <% _.each(days, function(day) { %> 

        <div class="<%= day.classes %>"> 

         <div class="clndr-day"><%= day.day %></div> 

         <div class="clndr-events"> 

          <% _.each(day.events, function(event) { %> 
           <div class="clndr-event category-<%= event.category %>" 
            data-description="<%= event.description %>" 
            data-category="<%= event.category %>" 
            data-time="<%= event.time %>" 
            data-date="<%= event.date %>" 
           ></div> 
          <% }); %> 

         </div> 


        </div> 

       <% }); %> 

      </div> 

     </div> 

    </div> 

</div> 

+0

Как задаются данные элемента? Какая система календаря? – charlietfl

+0

Данные элемента устанавливаются через PHP-скрипт. Полное дерево данных JSON можно увидеть здесь: [ссылка] (http://antibang.com/js/berlinbraves/calendar/?tk=9832187dsamj__dsaj7321njdsa)] Система каландр CLNDR, и это время устанавливается с помощью другой над ним сценарий, который я добавил в главный пост. –

+1

так ли атрибуты данных в шаблоне правильно установлены, когда вы проверяете живой html в инструментах браузера dev? Также попробуйте logging '$ this.data()' для консоли и посмотреть, что содержит полный объект – charlietfl

ответ

0

Атрибуты данных HTML не установлены правильно, поэтому mingly нет шаблона для размещения информации. Работа сразу после изменения шаблона (вверху).

1

Try:

var obj =[{"id":"[email protected]","title":null,"events":[{"start":{"date":null,"time":"2016-02-16T10:00:00+01:00"},"end":{"date":null,"time":"2016-02-16T11:00:00+01:00"},"location":"Kreuzberg, Berlin, Germany","description":"Basketball Test","color_id":"1","ical_uid":"[email protected]"},{"start":{"date":null,"time":"2016-02-15T20:00:00+01:00"},"end":{"date":null,"time":"2016-02-15T21:00:00+01:00"},"location":"Prenzlauer Berg, Berlin, Germany","description":"Football test","color_id":"9","ical_uid":"[email protected]"},{"start":{"date":null,"time":"2016-02-17T09:00:00+01:00"},"end":{"date":null,"time":"2016-02-17T10:00:00+01:00"},"location":"Neuk\u00f6lln, Berlin, Germany","description":"Baseball Test","color_id":"7","ical_uid":"[email protected]"},{"start":{"date":null,"time":"2016-02-18T10:00:00+01:00"},"end":{"date":null,"time":"2016-02-18T11:00:00+01:00"},"location":"Baseball Test","description":"Baseball Test","color_id":"2","ical_uid":"[email protected]"},{"start":{"date":null,"time":"2016-02-16T20:00:00+01:00"},"end":{"date":null,"time":"2016-02-16T21:00:00+01:00"},"location":"Somewhere","description":"Elsewhere","color_id":"2","ical_uid":"[email protected]"},{"start":{"date":null,"time":"2016-02-13T08:00:00+01:00"},"end":{"date":null,"time":"2016-02-13T09:00:00+01:00"},"location":"Prenzlauer Berg, Berlin, Germany","description":"YEAH! Football!","color_id":"1","ical_uid":"[email protected]"},{"start":{"date":null,"time":"2016-02-15T09:00:00+01:00"},"end":{"date":null,"time":"2016-02-15T10:00:00+01:00"},"location":"Neuk\u00f6lln, Berlin, Germany","description":"test name","color_id":"2","ical_uid":"[email protected]"}]}]; 
    var converted = []; 
    $.each(obj[0].events,function(i,eItem){ 
    formatted = moment(eItem.start.time); 

       converted.push({ 

        date: formatted.format('YYYY-MM-DD'), 

        formatted_date: formatted.format('DD.MM.YY'), 
        formatted_time: formatted.format('HH:mm') + ' Uhr', 

        location: eItem.location, 
        description: eItem.description, 
        link: eItem.ical_uid, 
        category: eItem.color_id == null ? 'default' : eItem.color_id 

       }); 

    }); 
console.log(converted); 

jsfiddle: https://jsfiddle.net/o1f62n4g/1/

+0

Я пробовал это, и атрибуты отображаются в списке на консоли. Однако, когда я заменяю «var obj» для живого файла, данные исчезают. –

Смежные вопросы