SharePoint 2013 - Retrieving List/ List Items using REST Service

Sample code to retrieve Lists and List Items using REST service in SharePoint 2013

 < %@ Page Language="C#" %>

< !DOCTYPE html>

< script runat="server">

< /script>

< html xmlns="http://www.w3.org/1999/xhtml">
< head id="Head1" runat="server">
    < title>Basic Rest Client< /title>
< script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js">< /script>
< /head>
< body>

< script type="text/javascript">
    $(document).ready(function () {

        $.ajax({
            url: "http://goazrapp19.cloudapp.net/_api/web/lists",
            type: "GET",
            headers: {
                "ACCEPT": "application/json;odata=verbose"
            },
            success: function (data) {
                //document.getElementById("message").innerText = JSON.stringify(data, null, "\t");
                var results = data["d"]["results"];
                var listTree = document.getElementById("listTree");

                for (var i = 0, length = results.length; i <  length; i++) {
                    var result = results[i];
                    console.log(result["Title"] + " " + result["ItemCount"]);
                    var listTitle = result["Title"];
                    var li = document.createElement("li");
                    li.id = listTitle;
                    li.appendChild(document.createTextNode(listTitle));
                    listTree.appendChild(li);
                    getListItems(result["__metadata"]["uri"], li);
                }
            },
            failure: function (data) {
                console.log("got an error");
            }
        });

        function getListItems(listURL, liList) {
            $.ajax({
                url: listURL + "/Items",
                type: "GET",
                headers: {
                    "ACCEPT": "application/json;odata=verbose"
                },
                success: function (data) {
                    var results = data["d"]["results"];
                    console.log(JSON.stringify(results));
                    var ul = document.createElement('ul');

                    for (var i = 0, length = results.length; i <  length; i++) {
                        var result = results[i];
                        // console.log(result["Title"]);
                        var li = document.createElement("li");
                        li.appendChild(document.createTextNode(result["Title"]));
                        ul.appendChild(li);

                    }
                    liList.appendChild(ul);
                },
                failure: function (data) {
                    console.log("got an error getting items");
                }
            });
        }
    });
< /script>    < form id="form1" runat="server">
   
         < div id="message">
            < /div>
    < ul id="listTree">
    < /ul>
    < /form>
< /body>
< /html>

SharePoint 2013 - Retrieving ListItem using JSOM (Javascript Object Model)

Here is the same code to fetch list/list item and create new list item using JSOM.

< %@ Page Language="C#" %>

< !DOCTYPE html>

< script runat="server">

< /script>

< html xmlns="http://www.w3.org/1999/xhtml">
< head id="Head1" runat="server">
    < title>Basic Javascript client< /title>

< /head>
< body>
< script
    src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"
    type="text/javascript">
< /script>
< script
    type="text/javascript"
    src="/_layouts/15/sp.runtime.js">
< /script>
< script
    type="text/javascript"
    src="/_layouts/15/sp.js">
< /script>
    < script type="text/javascript">



        var collList;
        var clientContext;

        retrieveWebSiteProperties();

        function retrieveWebSiteProperties() {
            clientContext = new SP.ClientContext.get_current();

            this.oWebsite = clientContext.get_web();
            clientContext.load(this.oWebsite, 'Title', 'Created');


            collList = oWebsite.get_lists();
            clientContext.load(collList, 'Include(Title, Id)');

            clientContext.executeQueryAsync(
                Function.createDelegate(this, this.onQuerySucceeded),
                Function.createDelegate(this, this.onQueryFailed)
            );
        }

        function onQuerySucceeded(sender, args) {
            var message = 'Title: ' + this.oWebsite.get_title() +
                ' Created: ' + this.oWebsite.get_created();

            document.getElementById("message").innerText = message;

            //display lists
            var listEnumerator = collList.getEnumerator();
            var listTree = document.getElementById("listTree");
            while (listEnumerator.moveNext()) {
                var oList = listEnumerator.get_current();
                var listTitle = oList.get_title();
                var li = document.createElement("li");
                li.id = listTitle;
                li.appendChild(document.createTextNode(listTitle));
                listTree.appendChild(li);
                if (listTitle == "CustomList1") {
                    getListItems();
                }
            }
        }

        function getListItems() {
            //alert('getting list items');
            var oList = clientContext.get_web().get_lists().getByTitle('CustomList1');

            var camlQuery = new SP.CamlQuery();
            camlQuery.set_viewXml(
                '< View>< Query>< Where>< Geq>< FieldRef Name=\'ID\'/>' +
                '< Value Type=\'Number\'>1< /Value>< /Geq>< /Where>< /Query>' +
                '< RowLimit>25< /RowLimit>< /View>'
            );
            this.collListItem = oList.getItems(camlQuery);

            clientContext.load(collListItem);
            clientContext.executeQueryAsync(
                Function.createDelegate(this, this.onItemsGetQuerySucceeded),
                Function.createDelegate(this, this.onQueryFailed)
            );

        }

        function onQueryFailed(sender, args) {
            console.log('Request failed. ' + args.get_message() +
                '\n' + args.get_stackTrace());
        }


        function createListItem() {

            var oList = clientContext.get_web().get_lists().getByTitle('CustomList1');

            var itemCreateInfo = new SP.ListItemCreationInformation();
            this.oListItem = oList.addItem(itemCreateInfo);
            oListItem.set_item('Title', document.getElementById("itemTitle").value);
            oListItem.update();

            clientContext.load(oListItem);
            clientContext.executeQueryAsync(
                Function.createDelegate(this, this.onItemCreateQuerySucceeded),
                Function.createDelegate(this, this.onQueryFailed)
            );
        }


        function onItemsGetQuerySucceeded() {
            var listItemEnumerator = collListItem.getEnumerator();

            var cl = document.getElementById("CustomList1");
            while (cl.childNodes.length > 0) {
                cl.removeChild(cl.childNodes[0]);

            }
            cl.textContent = cl.id;
            var ul = document.createElement("ul");;
            while (listItemEnumerator.moveNext()) {
                var oListItem = listItemEnumerator.get_current();
                var li = document.createElement("li");
                li.appendChild(document.createTextNode("Title:" + oListItem.get_item('Title') + " Name: " + oListItem.get_item('Name')));
                ul.appendChild(li);
            }
            cl.appendChild(ul);
            var div = document.createElement("div");
            div.innerHTML = document.getElementById("addItemPanel").innerHTML;
            cl.appendChild(div);
        }

        function onItemCreateQuerySucceeded() {
            //alert('Item created: ' + oListItem.get_id());
            getListItems();
        }

< /script>

    < form id="form1" runat="server">
    < div id="message">
    < /div>
    < ul id="listTree">
    < /ul>
 
    < div id="addItemPanel" style='display:none'>    
    Item Title: < input type="text" name="itemTitle" title="Item Title" id="itemTitle"/>
    < a href="javascript:createListItem()">Create List Item< /a>
    < /div>
    < /form>
< /body>
< /html>