Невозможно привязать данные API JSON к коду JavaScript - PullRequest
Новая
       13

Невозможно привязать данные API JSON к коду JavaScript

0 голосов
/ 21 июня 2019

Моя проблема в том, что я вызываю API, который дает мне набор данных JSON, которые мне нужно связать через Javascript.Я использую fullcalendar API для отображения календаря.Ниже я просто вставляю свой код, пожалуйста, помогите мне.В консоли я не вижу никаких ошибок, но все равно это не работает.

Я использую asp.net mvc 5 для моего API и для получения запроса я напрямую использую javascript js6 fetch.

Myкод JavaScript 

 document.addEventListener('DOMContentLoaded', function () {
        var calendarEl = document.getElementById('calendar');
        //fetch data for events
        var eventdata = fetch('@Url.Action("GetTsdates", "Remo")')
                .then(function (responce) {
                    responce.json().then(function (data) {
                        console.log(data);
                        return data;
                    })
                })
                .catch(function (err) {
                    console.log('Fetch Error :-S', err);
                });

        var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            //defaultDate: '2019-06-12',
            editable: true,
            eventLimit: true,
            events: eventdata
        });
        calendar.render();
    });

Данные JSON в консоли 

{start: "2019-06-01", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-02", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-03", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-04", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-05", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-06", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-07", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-08", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-09", overlap: false, rendering: "background", color: "#f44242"},
 {start: "2019-06-10", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-11", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-12", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-13", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-14", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-15", overlap: false, rendering: "background", color: "#f44242"},
{start: "2019-06-16", overlap: false, rendering: "background", color: "#f44242"}

i Донот Хава, любая ошибка в консоли.Но все равно это не работает.Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 21 июня 2019

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

Затем он будет вызывать предоставленный URL-адрес / запускать предоставленную функцию всякий раз, когда ему нужно извлечь новые события (что происходит всякий раз, когда пользователь изменяет представление календаря на диапазон дат, для которого события не были предварительно выбраны - обычно, дляэффективность, ваш сервер должен отправлять события только для тех дат, которые действительно отображаются. FullCalendar может сообщить вашему серверу, для каких дат ему нужны данные.)

Подробнее о каждой из этих функций вы можете прочитать в документации fullCalendar:

1) Источник события URL

2) Источник события функции

В вашем случае кажется, что ваш сервер ужевозвращает данные в правильном формате с помощью запроса GET, поэтому я думаю, что вы можете перейти к варианту 1 и просто предоставить fullCalendar с URL-адресом и позволить ему продолжить работу.Поэтому вы можете изменить свой код следующим образом: 

document.addEventListener('DOMContentLoaded', renderCalendar);

function renderCalendar() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['interaction', 'dayGrid'],
        //defaultDate: '2019-06-12',
        editable: true,
        eventLimit: true,
        events: '@Url.Action("GetTsdates", "Remo")'
    });
    calendar.render();
}

NB. В соответствии с этой документацией, ваш сервер в идеале должен быть запрограммирован так, чтобы принимать параметры даты начала и окончания, которые fullCalendar будет прикреплять к своему запросу на выборку, а затем фильтроватьсписок возвращаемых событий, так что он возвращает только те события, которые попадают в эти даты.Это будет полезно для производительности, если у вас есть большое количество исторических событий, так как вы не будете тратить время и трафик на загрузку событий там, где есть большая вероятность того, что пользователь их никогда не увидит.

0 голосов
/ 21 июня 2019

Вам нужно написать функцию, которая принимает разрешенное значение обещания и отображает календарь. 

document.addEventListener('DOMContentLoaded', getEventsFromServer);

function getEventsFromServer() {
    fetch('@Url.Action("GetTsdates", "Remo")')
        .then(resp => resp.json())
        .then(data => renderCalendar(data))
        .catch(err => console.log('Fetch Error :-S', err));
}

function renderCalendar(data) {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid'],
            //defaultDate: '2019-06-12',
            editable: true,
            eventLimit: true,
            events: data
        });
    calendar.render();
}
...