Display an Announcement List inside <div> tag

Question

Here is my code to fetch Announcements List and display it as HTML table:

<script type="text/javascript" src="/Test_Library/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/Test_Library/js/jquery.SPServices-0.7.1a.min.js"></script>

<div id="Announcements"></div>

<SCRIPT type=text/javascript>
$(document).ready(function() {
//alert("called");   
//alert($().SPServices.SPGetCurrentSite());

var list = "Announcements";                      
var fieldsToRead = "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Dream_x0020_Destination' /><FieldRef Name='PPP' /></ViewFields>";
//var query = "<Query>" + "<Where>" + "<Or>" + "<Or>" + "<Eq>" + "<FieldRef Name='Title'/><Value Type='Text'>The America</Value>" + "</Eq>" + "<Eq>" + "<FieldRef Name='Dream_x0020_Destination' /><Value Type='Text'>USA</Value>" + "</Eq>" + "</Or>" + "<IsNotNull>" + "<FieldRef Name='PPP'/>" + "</IsNotNull>" + "</Or>" + "</Where>" + "<OrderBy>" + "<FieldRef Name='PPP' Ascending='False'/>" + "</OrderBy>" + "</Query>";                         
var query="<Query></Query>";
$().SPServices({
operation: "GetListItems",
async: false, 

listName: "Announcements",
CAMLViewFields: fieldsToRead,
CAMLQuery: query,                                                                                     
completefunc: function(xData, Status)
{
    $(xData.responseXML).find("z\\:row, row").each(function () 
    {
        //alert(xData.responseXML);
        var _Title = $(this).attr("ows_Title");
        //alert(_Title);
        var _Dream_x0020_Destination = $(this).attr("ows_Dream_x0020_Destination");
        var _PPP =  $(this).attr("ows_PPP");

        $("#Announcements").append("<tr align='middle'>" +  "<td align='left'>"+_Title+"</td>" + "<td align='left'>"+_Dream_x0020_Destination+"</td>" +"<td align='left'>"+_PPP+"</td>"  +  "</tr>");
    });
}
});

});

I am trying to display this list inside a div tag. I tried writing the script part within the head tag as well as body tag. However, it is not getting displayed and throwing an error

"Uncaught ReferenceError: ExecuteOrDelayUntilScriptLoaded is not defined".

Any help will be highly appreciated.

Answer 1

The error you have been getting is discussed here :

Getting 'ExecuteOrDelayUntilScriptLoaded' undefined error in aspx page

You can also try getting the list items with REST api, the implementation should look something like this-

function getItems(url) {

    var announcement = "<table>"  

    $.ajax({
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Announcements')/Items";,
        type: "GET",
        headers: {
            "accept": "application/json;odata=verbose",
        },
        success: function (data) {
            for(var i = data.d.results.length -1 ; i >=0 ; i-- ) {
                 announcement += '<tr><td>'+data.d.results[i].Title+'</td></tr>';
            }
            announcement += '</table>';
            $('#announcementContainer').html(announcement);

        },
        error: function (error) {
            alert(JSON.stringify(error));
        }
    });
}

Crud Operations to list using Rest API