從javascript返回json對象

Question

我正在使用 fullcalendar 和 google calendar api，我可以在其中獲取我的事件並希望將它們作為 json 傳送到我的 fullcalendar，因為 fullcalendar 事件接受它作為數據源並自動將它們呈現到日歷中。

我有我的 html 文件，其中包含許多資源和一個創建日歷的 jQuery 腳本：

<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>

請注意事件：將 json 對象帶入。我有一個 json 文件，其硬編碼 json 對象與我正在嘗試創建的對象相同，並且工作正常。 但是在以下 javascript 文件中出現了問題/錯誤。

日歷數據.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;
}

正如您可能看到的，除了最后的 json 之外，這與 api 日歷 javascript 快速入門非常接近。 我希望腳本將 json 對象返回到 fullcalendar 但這不起作用，所以如果可能，我該如何更改呢？

當我字符串化並提醒對象時，我可以看到創建的對象與前面提到的有效的 json 文件相同。

編輯：我正在談論的 json 文件以及可以使用哪些數據如下所示：

[{"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}]

當我字符串化並提醒對象時，它看起來像這樣：

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"}]}

Answer 1

你的問題在這里：

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

“事件”無法將 javascript 文件作為輸入，也無法作為直接的 json 字符串。 你可以給它一個事件數組、一個URL或一個函數。

我猜你打算用listUpcomingEvents()函數的結果來提供“事件”。

您可以這樣做（只需確保您在 HTML 文件中也添加了calendarData.js作為腳本 src）：

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

Answer 2

要在 JS / JSON 對象之間進行交互，您必須使用：

JSON.stringify()
JSON.parse()

參考在這里和這里

例如：JS > JSON > JS

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

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

Answer 3

將其轉換為 JSON 對象，如下所示：

var Jobj = JSON.parse(your_string_data);

從javascript返回json對象

問題描述

3 個解決方案

解決方案1
1 2016-05-27 05:42:14

解決方案2
0 2016-05-26 11:19:10

解決方案3
0 2016-05-26 11:28:03

從javascript返回json對象

問題描述

3 個解決方案

解決方案1 1 2016-05-27 05:42:14

解決方案2 0 2016-05-26 11:19:10

解決方案3 0 2016-05-26 11:28:03

解決方案1
1 2016-05-27 05:42:14

解決方案2
0 2016-05-26 11:19:10

解決方案3
0 2016-05-26 11:28:03