时间戳

首页 > 解决方案 > 无法将 api json 数据绑定到 javascript 代码

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

问题描述

我的问题是我调用了一个 api，它给了我一组我需要通过 javascript 绑定的 json 数据。我正在使用 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"}

我在控制台中没有任何错误。但它仍然无法正常工作。提前致谢。

标签： javascriptc#ajaxfullcalendarfullcalendar-4

解决方案

FullCalendar 为您提供定义动态事件源的方法。您不必直接提供数据数组 - 相反，您可以只提供一个 URL，它将以正确格式返回 JSON 数据，让 fullCalendar 完成其余工作，或者您可以提供一个回调函数，fullCalendar 将运行为了得到事件。

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

您可以在 fullCalendar 文档中详细了解这些功能中的每一个：

1) URL 事件源

2)函数事件源

在您的情况下，您的服务器似乎已经通过 GET 请求以正确的格式返回数据，所以我认为您可以使用选项 1，只需提供带有 URL 的 fullCalendar 并让它继续工作。因此，您可以将代码更改为：

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

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

推荐阅读