Retrieve SharePoint APP Host Web List Items in SharePoint Hosted App

In this article I would like to share the code to get the list items from the app host web site collection in a SharePoint Hosted app using JavaScript.

Use the following code to get the items:

var context = SP.ClientContext.get_current();
var user = context.get_web().get_currentUser();
var hostWebUrl;
var appWebUrl;
var listName = "NewsList";
var itemCollection;
var lists;
var ctx;
var appCtxSite;
var listEnumerator;
var currentlist;
var list;
var currentListItems;
var itemTitle;
var web;
var siteUrl;

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
$(document).ready(function ()
{
    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
    getListItemFromHostWeb();

});


//This function is used to get the hostweb url
function manageQueryStringParameter(paramToRetrieve)
{
    var params =
    document.URL.split("?")[1].split("&");
    var strParams = "";
　　for (var i = 0; i < params.length; i = i + 1)
　　 {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
　　　　{
            return singleParam[1];
        }
    }
}

//get the list data from host web
function getListItemFromHostWeb() {
    debugger;
    ctx = new SP.ClientContext(appWebUrl);
    appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
    web = appCtxSite.get_web();
    lists = web.get_lists();
    ctx.load(lists);
    ctx.executeQueryAsync(IsListExist, OnGetListItemFailure);

}

//check whether list is exist or not
function IsListExist() {
    debugger;
    //alert('check whether list is exist or not');
    var isListAvail = false;
    listEnumerator = lists.getEnumerator();
    while (listEnumerator.moveNext()) {
        currentlist = listEnumerator.get_current();
        if (currentlist.get_title() == listName) {
            isListAvail = true;
            //Read list items from the lists
            getListItemCollection();
        }
    }
    if (!isListAvail) {
        alert('News List not available in this site');
    }

}

//getItemsCollection from sp host web list
function getListItemCollection() {
    debugger;
    list = lists.getByTitle(listName);
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View>" + "<RowLimit>2</RowLimit>" + "</View>");
    itemCollection = list.getItems(camlQuery);
    ctx.load(itemCollection);
    ctx.executeQueryAsync(OnGetListItemSuccess, OnGetListItemFailure);
}

// Get Items from List Item collection
function OnGetListItemSuccess() {
    debugger;
    var imageStr = "";
    if (itemCollection.get_count() > 0) {
        var enumerator = itemCollection.getEnumerator();
        while (enumerator.moveNext()) {
            currentListItems = enumerator.get_current();
            itemTitle = currentListItems.get_item("Title");
            var itemImageURL = currentListItems.get_item("ImageUrl");
            document.getElementById('lblTitle').innerHTML += itemTitle + ",";
            if (itemImageURL != "" && itemImageURL!=null) {
                imageStr += "<img src='" + itemImageURL.get_url() + "' alt='No Image' />";

            }
        }
        document.getElementById('image').innerHTML = imageStr;

    }
}

function OnGetListItemFailure(sender, args) {
    alert('Failed to get user name. Error:' + args.get_message());
}

In the AppManifest.xml file give Read permission to the SiteCollection.

Summary

In this article we explored how to retrieve list items in a SharePoint Hosted app from an app host web list.