2016-05-26 18 views
1

Ich arbeite mit Vollkalender, und die Google Kalender API, wo ich meine Ereignisse aus und möchte sie zu meinem Vollkalender als JSON liefern seit dem Vollkalender-Ereignis akzeptieren, dass als eine Datenquelle und rendert sie automatisch in der Kalender.Rückgabe von JSON-Objekt von Javascript

Ich habe meine HTML-Datei, die eine Reihe von Ressourcen und ein jQuery-Skript enthält, die den Kalender erstellt:

<html> 
    <head> 
     <link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> 
     <script src='fullcalendar/lib/jquery.min.js'></script> 
     <script src='fullcalendar/lib/moment.min.js'></script> 
     <script src='fullcalendar/fullcalendar.js'></script> 
     <script type='text/javascript' src='fullcalendar/gcal.js'></script> 
     <script src='fullcalendar/lang/da.js'></script> 

     <script type='text/javascript'> 
      $(document).ready(function() { 
       $('#calendar').fullCalendar({ 
        defaultView: 'agendaWeek', 
        weekends: false, 
        lang: 'da', 
        header: false, 
        allDaySlot: false, 
        allDayText: '', 
        height: 695, 
        minTime: '06:00:00', 
        maxTime: '20:00:00', 
        events: 'calendarData.js' 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="calendar"></div> 
    </body> 
</html> 

Beachten Sie die Ereignisse: die in das JSON-Objekt nimmt Ich habe eine JSON-Datei mit identischem fest einprogrammiert. Json-Objekt als das, das ich versuche zu erstellen, und das funktioniert gut. Aber etwas stimmt nicht/ist falsch in der folgenden Javascript-Datei.

calendarData.js

var CLIENT_ID = 'id'; 

var SCOPES = ["https://www.googleapis.com/auth/calendar.readonly"]; 

/** 
* Check if current user has authorized this application. 
*/ 
function checkAuth() { 
    gapi.auth.authorize(
     { 
      'client_id': CLIENT_ID, 
      'scope': SCOPES.join(' '), 
      'immediate': true 
     }, handleAuthResult); 
} 

/** 
* Handle response from authorization server. 
* 
* @param {Object} authResult Authorization result. 
*/ 
function handleAuthResult(authResult) { 
    var authorizeDiv = document.getElementById('authorize-div'); 
    if (authResult && !authResult.error) { 
     // Hide auth UI, then load client library. 
     authorizeDiv.style.display = 'none'; 
     loadCalendarApi(); 
    } else { 
     // Show auth UI, allowing the user to initiate authorization by 
     // clicking authorize button. 
     authorizeDiv.style.display = 'inline'; 
    } 
} 

/** 
* Initiate auth flow in response to user clicking authorize button. 
* 
* @param {Event} event Button click event. 
*/ 
function handleAuthClick(event) { 
    gapi.auth.authorize(
     {client_id: CLIENT_ID, scope: SCOPES, immediate: false}, 
     handleAuthResult); 
    return false; 
} 

/** 
* Load Google Calendar client library. List upcoming events 
* once client library is loaded. 
*/ 
function loadCalendarApi() { 
    gapi.client.load('calendar', 'v3', listUpcomingEvents); 
} 

/** 
* Print the summary and start datetime/date of the next ten events in 
* the authorized user's calendar. If no events are found an 
* appropriate message is printed. 
*/ 
function listUpcomingEvents() { 
    var request = gapi.client.calendar.events.list({ 
     'calendarId': 'primary', 
     'timeMin': (new Date()).toISOString(), 
     'showDeleted': false, 
     'singleEvents': true, 
     'maxResults': 10, 
     'orderBy': 'startTime' 
    }); 
    var json = {}; 

    request.execute(function(resp) { 
     var events = resp.items; 
     json.json = []; 

     if (events.length > 0) { 
      for (i = 0; i < events.length; i++) { 
       var event = events[i]; 
       var when = event.start.dateTime; 
       if (!when) { 
        when = event.start.date; 
       } 
       json.json.push({id : i+1, title : event.summary, start : event.start.dateTime, end : event.end.dateTime, desc : event.description}); 
      } 
     } 
    }); 
    return json; 
} 

Wie Sie dies ganz in der Nähe sehen könnten zum api Kalender auseinander am Ende von den json JavaScript-quickstart ist. Ich möchte, dass das Skript ein Json-Objekt an den Vollkalender zurückgibt, aber das funktioniert nicht. Wie kann ich das also ändern, wenn es möglich ist?

Wenn ich das Objekt stringifizieren und warnen, kann ich sehen, dass das erstellte Objekt ist die gleiche wie die zuvor erwähnte Json-Datei, die funktioniert.

Edit: Die JSON-Datei ich spreche und welche Daten verwendet werden können, sieht wie folgt aus:

[{"id":"1","title":"Test 1","start":"2016-05-26","end":"2016-05-26T16:30:00","allDay":false},{"id":"2","title":"Test 2","start":"2016-05-26","end":"2016-05-26T17:00:00","allDay":false},{"id":"3","title":"Test 3","start":"2016-05-27T08:00:00","end":"","allDay":false}] 

Als ich stringify und alarmieren das Objekt sieht es so aus:

var myObject = JSON.stringify(json); 
      alert(myObject); 
{"json":[{"id":1,"title":"ghhgfgh","start":"2016-05-26T14:30:00+02:00","end":"2016-05-26T15:30:00+02:00"}]} 

Antwort

0

zwischen JS/JSON-Objekt zu interract haben Sie zu verwenden:

JSON.stringify() 
JSON.parse() 

Referenz ar e here und here

Zum Beispiel: JS> JSON> JS

var x = { 
y: 'hello', 
z: 1 
}; 

console.log(JSON.parse(JSON.stringify(x))); 
0

wandeln es in JSON-Objekt wie folgt aus:

var Jobj = JSON.parse(your_string_data); 
+0

würde, damit var sein Jobj = JSON.parse (json); Jobj zurückgeben; ? Fügte auch etwas mehr auf dem json Element hinzu, wie es jetzt aussieht. – user6385714

+0

können Sie das Objekt zurückgeben wo immer Sie wollen. – sumngh

1

Ihr Problem ist hier:

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
    defaultView: 'agendaWeek', 
    weekends: false, 
    lang: 'da', 
    header: false, 
    allDaySlot: false, 
    allDayText: '', 
    height: 695, 
    minTime: '06:00:00', 
    maxTime: '20:00:00', 
    events: 'calendarData.js' 
    }); 
}); 

Die "Ereignisse" können weder eine Javascript-Datei als Eingabe noch als direkte JSON-Zeichenfolge erhalten Ing. Sie können eine array of events, eine URL oder eine function geben.

Ich vermute, Sie beabsichtigten, die "Ereignisse" mit den Ergebnissen von listUpcomingEvents() Funktion zu füttern.

Sie können es auf diese Weise tun (nur sicherstellen, dass Ihr Sie die calendarData.js als script src in der HTML-Datei als auch hinzugefügt werden):

$(document).ready(function() { 
    $('#calendar').fullCalendar({ 
    defaultView: 'agendaWeek', 
    weekends: false, 
    lang: 'da', 
    header: false, 
    allDaySlot: false, 
    allDayText: '', 
    height: 695, 
    minTime: '06:00:00', 
    maxTime: '20:00:00', 
    events: function(start, end, timezone, callback){ 
       callback(listUpcomingEvents()); 
      }, 
    }); 
}); 
+0

Danke, ja das tut es. Das einzige Problem ist, dass die Authentifizierung irgendwo zusammenbricht, wenn ich sie zu einer Funktion hinzufüge. Zum Beispiel Funktion getData() {var json = []; json.push ('einige fest codierte Daten'); return json;} funktioniert gut mit dem obigen Funktionsaufruf. Aber wenn ich die Datei calendarData.js in eine Funktion in einem Skript in der HTML-Datei hinzufüge, werden dem Array keine Daten hinzugefügt. Und ich weiß sicher, dass es funktioniert, da es läuft und Daten in einer anderen Datei ohne jQuery bekommt. Aber das ist kein direktes Vollkalenderproblem. – user6385714