Get the information form SharePoint list using REST ajax call

Add this below script into the Content Editor Webpart


(function ($) {
    $(document).ready(function () {
        // Ensure that the SP.js file is loaded before the custom code runs.
        SP.SOD.executeOrDelayUntilScriptLoaded(loadCompletedEventsData, 'SP.js');
    });

    /**************************************************************************************************
    * Function : loadCompletedEventsData                                                              *
    * Descritption : This function is used to get the data and assign the data to the respective table*
    **************************************************************************************************/
    //Get today Date and Year
    var curDate = new Date();
    curDate = curDate.getFullYear() + '-' + (curDate.getMonth() + 1) + '-' + curDate.getDate() + 'T00:00:00Z';
    function loadCompletedEventsData() {
        var CompletedEventListName = "Upcoming Events";
        jQuery.ajax({
            url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + CompletedEventListName + "')/Items?$orderby=EventEndDate desc&$filter=EventEndDate lt datetime'" + curDate + "'",
            type: "GET",
            headers: { Accept: "application/json;odata=verbose" },
            success: function (data) {
                if (data.d.results.length > 0) {
                    var results = data.d.results;
                    var convertDate;
                    var cplMonthNames = ["January", "February", "March", "April", "May", "June", "July",
                                    "August", "September", "October", "November", "December"];
                    var uniqueYear = new Array();
                    var viewAllCompletedEvents = _spPageContextInfo.webAbsoluteUrl + "/Pages/Completed-Events.aspx";
                    var completedEventDisplayUrl;
                    var iCounter = 0;
                    var finalCounter = 4;
                    $.each(results, function (index, dataEvents) {
                        var completedEventID = dataEvents.Id;
                        var completedEventTopic = dataEvents.Title;
                        var completedEventDescription = dataEvents.EventDescription;
                        var completedEventImageUrl = dataEvents.Image;
                        var completedEventEndDate = dataEvents.EventEndDate;
                        var tblhddate = new Date(completedEventEndDate);
                        var cplStrItem = "";
                        var completedEventDisplayUrl = _spPageContextInfo.webAbsoluteUrl + "/Pages/Event-Details.aspx?ID=" + completedEventID + "&InitialTabId=Ribbon.Read";
                        if (completedEventEndDate != "") {
                            $("#tbl-EveAndHapCompletedEventsViewAllLink").html();
                            if (iCounter < finalCounter) {
                                // Create a table row dynamically based on the content from the list.
                                cplStrItem = "<tr>" +
                                                "<td>" +
                                                    "<h3 >" + cplMonthNames[tblhddate.getMonth()] + " " + tblhddate.getDate() + ", " + tblhddate.getFullYear() + "</h3>" +
                                                    "<a href='" + completedEventDisplayUrl + "' > " + completedEventTopic + "</a>" +
                                                "</td>" +
                                            "</tr>";
                                $("#tbl-EveAndHapCompletedEventsContents").append(cplStrItem);
                                iCounter++;
                            }
                            else {
                                $("#tbl-EveAndHapCompletedEventsViewAllLink").html("<a href='" + viewAllCompletedEvents + "' > View All </a>");
                                return false;
                            }
                        }
                    });
                }
                else {
                   
                    strItem = "<tr><td><div class='queryEmptyMsg'> There are currently no Completed Events available. </div></td></tr>";
                    $("#tbl-EveAndHapCompletedEvents").html(strItem);
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                Console.log("completedEvents.js:loadCompletedEventsData:: " + textStatus);
            }
        });
    }
})(jQuery);