Unable to bind api json data to javascript code

Question

My problem is that i call an api which gives me a set of json data which i need to bind through javascript. I am using fullcalendar API to show the calendar. Below i just paste my code please help me. In console i donot have any error but still it is not working.

I am using asp.net mvc 5 for my api and to fetch the request i directly use javascript js6 fetch .

My javascript code

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

The json data in console

{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 Donot hava any error in console. But still it is not working . Thanks in advance.

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Kunal Mukherjee, Jun 21 '19 at 05:55
no kunal i hava different issue. please check the question again. — saswat saubhagya, Jun 21 '19 at 06:00
@saswatsaubhagya No, the duplicate is correct in many ways - you're not waiting for the fetch call to end before trying to use the data which it returns. And also in your code `eventData` is a Promise, not an array of data, so fullCalendar can't use it. You can't `return` data from the `.then()` callback. I think in general you should study the Promise architecture so you understand the concepts properly. But fullCalendar actually provides a more logical way to do what you need in terms of loading your events... I will write an answer explaining it in a moment — ADyson, Jun 21 '19 at 08:24

score 1 · Accepted Answer · answered Jun 21 '19 at 08:33

FullCalendar provides ways for you to define dynamic event sources. You don't have to provide an array of data directly - instead you can either just provide a URL which will return the JSON data in the correct format, and let fullCalendar do the rest, or you can provide a callback function which fullCalendar will run in order to get the events.

It will then call the provided URL / run the provided function whenever it needs to fetch new events (which occurs whenever the user changes the calendar view to a date range for which events were not previously fetched - normally, for efficiency, your server should only send events for the dates actually being displayed. FullCalendar can tell your server which dates it needs data for.)

You can read in more detail about each of these features in the fullCalendar documentation:

1) URL Event Source

2) Function Event Source

In your case, it appears that your server already returns data in the correct format via a GET request, so I think you can go with option 1, and just provide fullCalendar with the URL and let it get on with the job itself. Therefore you can change your code to simply:

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. As per that documentation, your server should ideally be programmed to accept the start and end date parameters which fullCalendar will attach to its fetch request, and then filter the list of events returned so that it only returns events which fall within those dates. This will be beneficial for performance if you have a large number of historical events, since you won't spend time and bandwidth loading events where there is a high chance that the user will never view them.

score 0 · Answer 2 · answered Jun 21 '19 at 06:01

You need to write a function which takes the resolved value of the promise and renders the calendar.

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

The job can be done much more efficiently, with less code, and without having to wait for the fetch request to complete before loading the calendar. It is done using the features provided by fullCalendar specifically for this purpose (and which also allow dynamic updating of the events during the life of the calendar) - see [my answer](https://stackoverflow.com/a/56699707/5947043) for details of the recommended approach to loading events. — ADyson, Jun 21 '19 at 08:34

Unable to bind api json data to javascript code

2 Answers2