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

Question

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

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

。我的脚本代码

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

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

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

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

1) 网址事件源

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 将附加到其获取请求的开始和结束日期参数，然后过滤返回的事件列表，以便它只返回属于这些日期的事件。如果您有大量历史事件，这将有利于提高性能，因为您不会花费时间和带宽加载事件，因为用户很可能永远不会查看它们。

Answer 2

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

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