2016-01-19 3 views
-3

Нам нужно вытащить следующуюизвлекать данные из JSON файла

var calEvents 

из отдельного файла JSON, как нам нужно заполнить события из наших собственной базы данных, в настоящее время 3 записей жестко закодированных в коде, показанном ниже

<script type="text/javascript"> 

$(document).ready(function() { 

var calEvents = [ 

{"icon": "bars","eid":"someID 1","name":"My event test","url":"#","start":new Date("2016-01-15T08:00:00.000Z"),"end":new Date("2016-01-15T10:00:00.000Z"),"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."}, 
{"eid":"someID 1","name":"My event test","url":"#","start":new Date("2016-01-10T17:00:00.000Z"),"end":new Date("2016-01-10T18:00:00.000Z"),"summary":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum."} 

]; 


$("#calendar").jqmCalendar({ 
    events : calEvents, 
    months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
    days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 
    startOfWeek : 1 
    }); 

Я буду очень благодарен за любую помощь, которую вы, ребята, можете мне дать.

+0

Вы упомянули вытягивание событий из базы данных - у вас уже есть ресурс задней части, который обслуживает данные из базы данных в формате JSON? –

+0

Да, создание JSON не проблема, например, это может быть /json.php –

+0

Поиск SO обнаружен: [Прочтите файл JSON с jQuery] (http://stackoverflow.com/q/10936196/218196) и еще пару других , Предполагая, что вы уже прочитали эти сообщения, с чем вы все еще сталкиваетесь? Существует также [Google] (https://www.google.com/#q=read+json+file+with+jquery). –

ответ

0

Вы должны изменить "start" на "begin" в своем JSON. Это имя свойства, которое ожидает jmqCalendar.

var calEvents = [ 

     { 
      "icon": "bars", 
      "eid": "someID 1", 
      "name": "My event test", 
      "url": "#", 
      "begin": new Date("2016-01-15T08:00:00.000Z"), 
      "end": new Date("2016-01-15T10:00:00.000Z"), 
      "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum." 
     }, 
     { 
      "eid": "someID 1", 
      "name": "My event test", 
      "url": "#", 
      "begin": new Date("2016-01-10T17:00:00.000Z"), 
      "end": new Date("2016-01-10T18:00:00.000Z"), 
      "summary": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet sem risus. Curabitur vehicula lacus eu tincidunt interdum." 
     } 

    ]; 
1

Вам необходимо использовать AJAX для получения данных с отдельного ресурса.

Если вы вытаскиваете базу данных, то я ожидаю, что у вас уже есть какая-то конечная точка, которая обслуживает JSON, где вы ожидаете, что данные будут доступны. Если у вас нет ничего подобного, прежде чем вы сможете вызывать данные таким образом из JavaScript, сначала вам нужно настроить какой-то задний конец, чтобы выставить свои данные в этом формате.

Если вы буквально просто помещаете код JSON в отдельный файл, я могу задать вопрос, почему это необходимо, поскольку оно все равно будет статическим.

Но, допустим, у вас есть конечная точка, и он находится в http://example.com/calendar/events

В этом случае вам нужно сделать вызов AJAX, как это:

function getCalEvents(callback) { 

    $.ajax({ 
    url: 'http://example.com/calendar/events', 
    dataType: 'json', 
    success: function(data) { 
     callback(data); 
    } 
    }); 

} 

$(document).ready(function() { 

    getCalEvents(function(calEvents) { 

    $("#calendar").jqmCalendar({ 
     events : calEvents, 
     months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
     days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 
     startOfWeek : 1 
    }); 

    }); 

}); 

Документация по $ .ajax : http://api.jquery.com/jQuery.ajax/

Может быть записан более кратко с сокращенной функцией $ .getJSON, если вам не нужно проходить какие-либо дополнительные настройки:

$(document).ready(function() { 

    $.getJSON('http://example.com/calendar/events', function(calEvents) { 
    $("#calendar").jqmCalendar({ 
     events : calEvents, 
     months : ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
     days : ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 
     startOfWeek : 1 
}); 
    }); 

}); 

Документация на $ .getJSON: http://api.jquery.com/jquery.getjson/

EDIT: просто заметил, что у вас есть new Date('...') звонки на нужные, которые вы используете. Я не думаю, что вы сможете сохранить их в отдельном файле JSON. Может ли jqmCalendar обрабатывать строку даты без преобразования в объект даты?

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