无法将 api json 数据绑定到 javascript 代码

Question

我的问题是我调用了一个 api，它给了我一组 json 数据，我需要通过 javascript 绑定这些数据。我正在使用 fullcalendar API 来显示日历。下面我只是粘贴我的代码请帮助我。在控制台中我没有任何错误，但仍然无法正常工作。

我正在为我的 api 使用 asp.net mvc 5 并且为了获取请求我直接使用 javascript js6 fetch .

我的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"}

我在控制台中没有任何错误。但它仍然不起作用。提前致谢。

Answer 1

您需要编写一个函数来获取承诺的解析值并呈现日历。

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();
}

Answer 2

FullCalendar 为您提供了定义动态事件源的方法。您不必直接提供数据数组 - 相反，您可以只提供一个 URL，它将 return JSON 数据以正确的格式显示，然后让 fullCalendar 完成剩下的工作，或者您可以提供一个回调函数，fullCalendar 将运行以获取事件。

然后它将在需要获取新事件时调用提供的 URL / 运行提供的函数（每当用户将日历视图更改为事件发生的日期范围时就会发生这种情况）以前未获取 - 通常，为了提高效率，您的服务器应该只发送实际显示日期的事件。FullCalendar 可以告诉您的服务器它需要哪些日期的数据。）

您可以在 fullCalendar 文档中阅读有关这些功能的更多详细信息：

1) URL Event Source

2) Function Event Source

在你的情况下，你的服务器似乎已经通过 GET 请求以正确的格式 returns 数据，所以我认为你可以选择选项 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();
}

N.B。根据该文档，理想情况下，您的服务器应该被编程为接受 fullCalendar 将附加到其获取请求的开始和结束日期参数，然后过滤事件列表 returned 以便它只 return属于这些日期的事件。如果您有大量历史事件，这将有利于提高性能，因为您不会花费时间和带宽加载用户很可能永远不会查看的事件。

无法将 api json 数据绑定到 javascript 代码

Unable to bind api json data to javascript code

javascript

c#

ajax

fullcalendar

fullcalendar-4