Javascript For loop to retrieve only the first eventdate from google calendar

Question

Below my home.html file, the script does the following:

Link the website to a google calendar API
Retrieve dates and names of rocket launches

My issue is, since the calendar for the same rocket has multiple launches in the same month, I want it to be where the loop only pushes the next incoming launch/event (instead, it pushes only the last, skipping all the others before).

Any suggestions? Thank you!

Here below the data from Google Calendar API.

Array(25)
0
: 
{name: '(NET) Hanbit-TLV  • Test Flight', eventdate: '12/15/2022 12:00 AM'}
1
: 
{name: '(NET) Kestrel I • Test Flight', eventdate: '12/15/2022 11:00 PM'}
2
: 
{name: 'Long March CZ-11 • Shenjian 2013', eventdate: '12/16/2022 6:00 AM'}
3
: 
{name: 'Falcon 9 B5 • SWOT', eventdate: '12/16/2022 11:46 AM'}
4
: 
{name: 'Falcon 9 B5 • O3b mPOWER 1–2', eventdate: '12/16/2022 9:21 PM'}
5
: 
{name: 'Falcon 9 B5 • Starlink 3557–3610', eventdate: '12/16/2022 9:54 PM'}
6
: 
{name: 'Electron • Hawk 6A/B/C', eventdate: '12/16/2022 11:00 PM'}
7
: 
{name: 'Vega C • Pléiades Neo 5–6', eventdate: '12/20/2022 1:47 AM'}
8
: 
{name: '(NET) Terran 1 • Test Flight', eventdate: '12/25/2022 12:00 AM'}
9
: 
{name: 'Falcon 9 B5 • Starlink', eventdate: '12/28/2022 8:19 AM'}
10
: 
{name: 'Falcon 9 B5 • EROS C3-1', eventdate: '12/29/2022 6:58 AM'}
11
: 
{name: 'Long March CZ-3B/E • BeiDou 54–55', eventdate: '12/30/2022 6:00 AM'}
12
: 
{name: '(NET) SSLV • TBD', eventdate: '01/01/2023 12:00 AM'}
13
: 
{name: '(NET) RS1 • CubeSats', eventdate: '01/01/2023 12:00 AM'}
14
: 
{name: '(NET) LauncherOne • Prometheus 2A/B & Amber 1', eventdate: '01/01/2023 12:00 AM'}
15
: 
{name: '(NET) Vulcan VC2S • PM1 & Kuipersat 1–2', eventdate: '01/01/2023 12:00 AM'}
16
: 
{name: '(NET) Falcon 9 B5 • SARah 2–3', eventdate: '01/01/2023 12:00 AM'}
17
: 
{name: '(NET) Falcon 9 B5 • WorldView Legion 1–2', eventdate: '01/01/2023 12:00 AM'}
18
: 
{name: '(NET) PSLV XL • Aditya-L1', eventdate: '01/01/2023 12:00 AM'}
19
: 
{name: '(NET) Atlas V 551 • NROL-107', eventdate: '01/01/2023 12:00 AM'}
20
: 
{name: '(NET) Nuri • TBD', eventdate: '01/01/2023 12:00 AM'}
21
: 
{name: '(NET) GSLV Mk.II • NVS 1', eventdate: '01/01/2023 12:00 AM'}
22
: 
{name: '(NET) Vega C • TBD', eventdate: '01/01/2023 12:00 AM'}
23
: 
{name: '(NET) GSLV Mk.II • EOS 5', eventdate: '01/01/2023 12:00 AM'}
24
: 
{name: '(NET) Falcon 9 B5 • SES 18 & SES 19', eventdate: '01/01/2023 12:00 AM'}
length
: 
25
[[Prototype]]
: 
Array(0)
(index):561 
Array(5)
0
: 
{name: 'Electron', eventdate: '12/16/2022 11:00 PM'}
1
: 
{name: 'Falcon 9 B5', eventdate: '01/01/2023 12:00 AM'}
2
: 
{name: 'New Shepard', eventdate: ''}
3
: 
{name: 'SpaceShipTwo', eventdate: ''}
4
: 
{name: 'Gaofen 14', eventdate: ''}

<!DOCTYPE html>
<html lang="en">

{% load static %}
{%include "Base.html"%}



<!-- cache eraser -->
<header>
  <meta name="propeller" content="12bebe3bdb5972b07a2a0340874adcdb">
  <meta http-equiv='cache-control' content='no-cache'>
  <meta http-equiv='expires' content='0'>
  <meta http-equiv='pragma' content='no-cache'>
</header>
<!-- fonts link and css/html link -->

<head>
  <script type="text/jquery" language="jquery">
  $(document).ready(function() { 
    $("body").addClass("animated hinge");
   });
    var versionUpdate = (new Date()).getTime();
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "../static/js/script.js?v=" + versionUpdate;
    document.body.appendChild(script);
  </script>


  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bangers">
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@900&display=swap');
  </style>

  <!-- For google calendar integration -->
  <script src="https://cdn.jsdelivr.net/npm/moment@2/moment.min.js"></script>
  <script src="https://apis.google.com/js/api.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function printCalendar() {
      var calendarId = 'xxx';
      var apiKey = 'xxx';
      var userTimeZone = "UTC";
      gapi.client.init({
        'apiKey': apiKey,
        'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
      }).then(function () {
        return gapi.client.calendar.events.list({
          'calendarId': calendarId,
          'timeZone': userTimeZone,
          'singleEvents': true,
          'timeMin': (new Date()).toISOString(), //gathers only events not happened yet
          'maxResults': 25,
          'orderBy': 'startTime'
        });
      }).then(function (response) {
        if (response.result.items) {
          var calendarRows = ['<table class="wellness-calendar"><tbody>'];
          var events = [];
          var startsAt;
          var endsAt;
          response.result.items.forEach(function (entry) {
            if (entry.start.dateTime != undefined) {
              startsAt = moment.utc(entry.start.dateTime).format("L") + ' ' + moment.utc(entry.start.dateTime).format("LT");
            }
            if (entry.start.date != undefined) {
              startsAt = moment.utc(entry.start.date).format("L") + ' ' + moment.utc(entry.start.date).format("LT");
            }
            if (entry.start.dateTime != undefined) {
              endsAt = moment.utc(entry.end.dateTime).format("L") + ' ' + moment.utc(entry.end.dateTime).format("LT");
            }
            if (entry.start.date != undefined) {
              endsAt = moment.utc(entry.end.date).format("L") + ' ' + moment.utc(entry.end.date).format("LT");
            }
            calendarRows.push(`<tr><td>${startsAt} - ${endsAt}</td><td>${entry.summary}</td></tr>`);
            console.log(entry.summary);
            event = {};
            if (entry.summary) {
              event["name"] = entry.summary;
              event["eventdate"] = startsAt;

              events.push(event);
             
            }

          });
          console.log(events);
          setAllEvenDates(events);
          console.log(arrElements);
          setAllInterval();
          calendarRows.push('</tbody></table>');
          $('#wellness-calendar').html(calendarRows.join(""));
        }
      }, function (reason) {
        console.log('Error: ' + reason.result.error.message);
      });
    };

    // Loads the JavaScript client library and invokes `start` afterwards.
    gapi.load('client', printCalendar);
  </script>

  <script>

    var arrElements = [
      { "name": "Electron", "eventdate": "" },
      { "name": "Falcon 9 B5", "eventdate": "" },
      { "name": "New Shepard", "eventdate": "" },
      { "name": "SpaceShipTwo", "eventdate": "" },
      { "name": "Gaofen 14", "eventdate": "" }
    ];

    function setAllEvenDates(arrEvents) {
      for (var i = 0; i < arrEvents.length; i++) {
        setEventDate(arrEvents[i].name, arrEvents[i].eventdate);
      }
    }


    function setEventDate(eventname, eventdate) {
      for (var i = 0; i < arrElements.length; i++) {
        if (eventname.search(arrElements[i].name) != -1) {
          arrElements[i].eventdate = eventdate;
        }
      }
    }

    function setAllInterval() {
      //return;
      // Update the count down every 1 second
      var x = setInterval(function () {
        for (var i = 0; i < arrElements.length; i++) {
          if (arrElements[i].eventdate != "") {

            var now = new Date().getTime();
            var countDownDate = new Date(arrElements[i].eventdate).getTime();
            // console.log("prova:",(arrElements[i].eventdate).getTime()) 
            var distance = countDownDate - (now - 3600000);
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);
            document.getElementById(arrElements[i].name).innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
            // console.log("test:",arrElements[i])
            if (distance < 0) {
              document.getElementById(arrElements[i].name).innerHTML = "EXPIRED";

            }

          }
          if (arrElements[i].eventdate == "") {
            document.getElementById(arrElements[i].name).innerHTML = "UNSCHEDULED";
          }
        }
      }, 1000);
    }

  </script>

</head>

<!-- begin snippet: js hide: false console: true babel: false -->

Reposting a deleted question is one of the ways to get rid of downvotes. Another way would be to pay attention to phrasing and spend some time to articulate the desired outcome. — Parzh from Ukraine, Dec 08 '22 at 20:31
Dear @Parzh from Ukraine, I never deleted this question, I've just added a bounty to it, hoping somebody will give me some hints:), or even a solution. — Cesare Mannino, Dec 08 '22 at 20:37
Indeed, the other question is [still there](https://stackoverflow.com/questions/74735660/for-loop-to-iterate-only-the-first-element-of-the-array) — Parzh from Ukraine, Dec 08 '22 at 20:45
Ideally you would post a raw JSON response from the google API as noone here can test your code snippet... — exside, Dec 15 '22 at 15:08

Jostein S · Answer 1 · 2022-12-12T10:07:38.823

I've rewritten the previous if to consider the startDate of the event and update existing events to the earliest startDate.

.then(function (response) {
if (response.result.items) {
  var calendarRows = ['<table class="wellness-calendar"><tbody>'];
  var events = [];
  var startsAt, endsAt;
  var startDate, endDate;
  response.result.items.forEach(function (entry) {
    startDate = entry.start.dateTime || entry.start.date;
    endDate = entry.end.dateTime || entry.end.date;

    if (startDate) {
      startsAt = moment.utc(startDate).format("L") + ' ' + moment.utc(startDate).format("LT");
    }
    if (endDate) {
      endsAt = moment.utc(endDate).format("L") + ' ' + moment.utc(endDate).format("LT");
    }

    calendarRows.push(`<tr><td>${startsAt} - ${endsAt}</td><td>${entry.summary}</td></tr>`);

    console.log(entry.summary);
    if (entry.summary) {
      const ev = {
        "name": entry.summary,
        "eventdate": startsAt,
        "start": startDate,
        "end": endDate,    
      }

      const exIndex = events.findIndex(e => e.name == ev.name);
      if(exIndex) {
        if(events[exIndex].start > ev.start) {
          events[exIndex] = ev;
        }
      } else {
        events.push(ev);
      }
    }
  });
  console.log(events);
  setAllEvenDates(events);
  console.log(arrElements);
  setAllInterval();
  calendarRows.push('</tbody></table>');
  $('#wellness-calendar').html(calendarRows.join(""));
}

No, unfortunately, is still giving me the last event on the calendar instead of the incoming one. — Cesare Mannino, Dec 09 '22 at 19:30
How about now then? I've rewritten more of the code to ensure the earliest startDate is used. — Jostein S, Dec 11 '22 at 13:12
No, unfortunately, pasting your code, is not allowing to retrieve data from calendar. — Cesare Mannino, Dec 12 '22 at 20:11

Hitendra Pal Singh Rao · Answer 2 · 2022-12-15T22:35:32.490

try this

gapi.client.init({
    'apiKey': apiKey,
    'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest'],
}).then(function() {
    return gapi.client.calendar.events.list({
        'calendarId': calendarId,
        'timeZone': userTimeZone,
        'singleEvents': true,
        'timeMin': (new Date()).toISOString(), //gathers only events not happened yet
        'maxResults': 25,
        'orderBy': 'startTime'
    });
}).then(function(response) {
    if (response.result.items) {
        var calendarRows = ['<table class="wellness-calendar"><tbody>'];
        var events = [];
        var startsAt, endsAt;
        var startDate, endDate;
        response.result.items.forEach(function(entry) {
            startDate = entry.start.date || entry.start.dateTime;
            endDate = entry.end.date || entry.end.dateTime;

            if (startDate) {
                startsAt = moment.utc(startDate).format("L") + ' ' + moment.utc(startDate).format("LT");
            }
            if (endDate) {
                endsAt = moment.utc(endDate).format("L") + ' ' + moment.utc(endDate).format("LT");
            }

            calendarRows.push(`<tr><td>${startsAt} - ${endsAt}</td><td>${entry.summary}</td></tr>`);
            // arrElements names list here
            const name = ["Electron", "Falcon 9 B5", "New Shepard", "SpaceShipTwo", "Gaofen 14"].find(item => entry.summary.search(item) !== -1)
            if (name) {
                const ev = {
                    "name": name,
                    "eventdate": startsAt,
                    "start": startDate
                }

                // Element with same name index
                const exIndex = events.findIndex(e => e.name == ev.name);

                if (exIndex !== -1) {
                    // check if previous entry had date greater than the new entry if so then new entry will replace old
                    if (moment.utc(events[exIndex].start).isAfter(moment.utc(ev.start))) {
                        events[exIndex] = ev;
                    }
                } else if (moment.utc(ev.start).isAfter(moment.utc())) {
                    // else push only if date is greater than current date
                    events.push(ev);
                }
            }
        });
    }
})

No, unfortunately, pasting your code, is not allowing to retrieve data from calendar. — Cesare Mannino, Dec 15 '22 at 21:27
can u update some sample data? that would be great for debugging — Hitendra Pal Singh Rao, Dec 15 '22 at 21:32
I did it. I also insert the google calendar address. Hope will help... — Cesare Mannino, Dec 15 '22 at 21:39

Javascript For loop to retrieve only the first eventdate from google calendar

2 Answers2