Question

嘿伙计我对Json很新，我一直在尝试将日历列表视图集成到我的网站中。目标是使用JSON

从我的Google公共日历创建一个简单的列表视图，如下所示

活动名称 - 开始和结束日期活动名称 - 开始和结束日期 ...（显示5个即将举行的活动）

以下是GET的网址：https://www.googleapis.com/calendar/v3/calendars/eaachapter309@gmail.com/events?key=AIzaSyBZilw_M3Jk14gkmGk_bBuQUcBr_EW5RI4

我遇到的问题是显示嵌套在根元素中的项目。例如，根据上面的URL，我想显示以下子元素的行中的每个项目：

“物品”： “摘要”， “开始”， “结束”

在上面的URL中有3个事件（即项目）我喜欢这些事件中的每一个都如下所示：

EAA第309章 - Young Eagles活动 - 11月18日，上午8:45 - 晚上11:00
EAA第309章建造之夜 - 11月14日，下午5:00 - 晚上8:00
等...

因此，在此示例中，代码需要执行以下操作：

最多可列出5个即将开始的日历活动条目
从父元素“items”
迭代到Start - ＆gt; dateTime子元素和End - ＆gt; dateTime元素
从UTC时间转换为标准12小时。

这是我正在玩的一些代码，但我不知道我在做什么。它使用表/行来插入数据但重新使用的代码是使用POST到一个php文件，其中有一个名为“Customers”的表。我试图重新调整代码，但显然它不起作用。 ie.code示例 - http://eaa309.club/CalendarExample.html

任何帮助都会很棒!!!!

<!DOCTYPE html>
<html>
<body>


<h2>Make a table based on JSON data.</h2>

<p id="demo"></p>

<script>
            var obj, dbParam, xmlhttp, myObj, x, txt = "";
            obj = { "Table":"Calendar", "limit":20 };
            dbParam = JSON.stringify(obj);
            xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    myObj = JSON.parse(this.responseText);
                    txt += "<table border='1' cellpadding='7' cellspacing='0'><tr><td>Event Summary</td><td>Event Start & End</td></tr>"
                    for (x in myObj) {
                        txt += "<tr><td>" + myObj[x].summary + "</td>" + "<td>Start & End Date from JSON Data needs to go here</td></tr>";
                    }
                    txt += "</table>"
                    document.getElementById("demo").innerHTML = txt;
                }
            };
        xmlhttp.open("GET", "https://www.googleapis.com/calendar/v3/calendars/eaachapter309@gmail.com/events?key=AIzaSyBZilw_M3Jk14gkmGk_bBuQUcBr_EW5RI4", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("x=" + dbParam);

            </script>

</body>
</html>

Answer 1

试试这个

   <!DOCTYPE html>
    <html>
    <body>


    <h2>Make a List based on JSON data.</h2>
    <ul id="myList"></ul>

    <!--JQuery CDN-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
      //Jquery's ajax request
      $.ajax({
        type:'GET',
        url:'https://www.googleapis.com/calendar/v3/calendars/eaachapter309@gmail.com/events?key=AIzaSyBZilw_M3Jk14gkmGk_bBuQUcBr_EW5RI4',
        dataType: 'json',
        async:true
      }).done(function(data){
       //once we get a successful response this callback function
       //gets fired, and "data" contains the parsed json file .

       //here we iterate over the object array
      $.each(data.items, function(i, item){
        //I do this to later format these timestamps
        let start = new Date(item.start.dateTime); 
        let end = new Date(item.end.dateTime);
        //set options for date.toLocaleDateString() function
        var options = { month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };
         //append data to the list.
         $('#myList').append(`
          <li>${item.summary} - ${start.toLocaleDateString('en-US', options)} - ${end.toLocaleDateString('en-US', options)} </li>
          `);

      });

      }).fail(function(e){
        error(e);
      });

    var months = ["January", "February", "March", "April", "May", "Jun", "July", "August", "September", "October", "November", "Dicember"];
    </script>

    </body>
    </html>

输出应为：

EAA第309章 - Young Eagles比赛 - 11月18日，下午1:45 - 11月18日，下午4:00 EAA第309章建造之夜 - 11月14日晚上10点至11月15日凌晨1点 EAA第309章建造之夜 - 11月14日晚上10点至11月15日凌晨1点

Answer 2

重复的前两个列表项的原因是因为这是JSON数据中的内容。看看原始的JSON，你会看到它。这只是使用过滤器去除状态为“已取消”的实体的问题。至于日期格式，我认为现在应该为你做，只需替换你的html文件中的这部分代码，你应该好好去。

 //here we iterate over the object array
 $.each(data.items, function(i, item){
   //I do this to later format these timestamps
   //set options for date.toLocaleDateString() function

   var options = { month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit' };

   let start = new Date(item.start.dateTime).toLocaleDateString('en-US', options);

   let end = new Date(item.end.dateTime).toLocaleDateString('en-US', options);

   let end_splt = end.split(',');

    //append data to the list.
    if(item.status != "cancelled"){
      $('#myList').append(`
       <li>${item.summary} - ${start} - ${end_splt[1]} </li>
       `);
    }

 });

 }).fail(function(e){
   error(e);
 });

如何显示简单的Google日历列表视图

2 个答案: