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:

  1. var context = SP.ClientContext.get_current();
  2. var user = context.get_web().get_currentUser();
  3. var hostWebUrl;
  4. var appWebUrl;
  5. var listName = "NewsList";
  6. var itemCollection;
  7. var lists;
  8. var ctx;
  9. var appCtxSite;
  10. var listEnumerator;
  11. var currentlist;
  12. var list;
  13. var currentListItems;
  14. var itemTitle;
  15. var web;
  16. var siteUrl;
  18. // This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model
  19. $(document).ready(function ()
  20. {
  21. hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));
  22. appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));
  23. getListItemFromHostWeb();
  25. });
  28. //This function is used to get the hostweb url
  29. function manageQueryStringParameter(paramToRetrieve)
  30. {
  31. var params =
  32. document.URL.split("?")[1].split("&");
  33. var strParams = "";
  34. 　　for (var i = 0; i < params.length; i = i + 1)
  35. 　　 {
  36. var singleParam = params[i].split("=");
  37. if (singleParam[0] == paramToRetrieve)
  38. 　　　　{
  39. return singleParam[1];
  40. }
  41. }
  42. }
  44. //get the list data from host web
  45. function getListItemFromHostWeb() {
  46. debugger;
  47. ctx = new SP.ClientContext(appWebUrl);
  48. appCtxSite = new SP.AppContextSite(ctx, hostWebUrl);
  49. web = appCtxSite.get_web();
  50. lists = web.get_lists();
  51. ctx.load(lists);
  52. ctx.executeQueryAsync(IsListExist, OnGetListItemFailure);
  54. }
  56. //check whether list is exist or not
  57. function IsListExist() {
  58. debugger;
  59. //alert('check whether list is exist or not');
  60. var isListAvail = false;
  61. listEnumerator = lists.getEnumerator();
  62. while (listEnumerator.moveNext()) {
  63. currentlist = listEnumerator.get_current();
  64. if (currentlist.get_title() == listName) {
  65. isListAvail = true;
  66. //Read list items from the lists
  67. getListItemCollection();
  68. }
  69. }
  70. if (!isListAvail) {
  71. alert('News List not available in this site');
  72. }
  74. }
  76. //getItemsCollection from sp host web list
  77. function getListItemCollection() {
  78. debugger;
  79. list = lists.getByTitle(listName);
  80. var camlQuery = new SP.CamlQuery();
  81. camlQuery.set_viewXml("<View>" + "<RowLimit>2</RowLimit>" + "</View>");
  82. itemCollection = list.getItems(camlQuery);
  83. ctx.load(itemCollection);
  84. ctx.executeQueryAsync(OnGetListItemSuccess, OnGetListItemFailure);
  85. }
  87. // Get Items from List Item collection
  88. function OnGetListItemSuccess() {
  89. debugger;
  90. var imageStr = "";
  91. if (itemCollection.get_count() > 0) {
  92. var enumerator = itemCollection.getEnumerator();
  93. while (enumerator.moveNext()) {
  94. currentListItems = enumerator.get_current();
  95. itemTitle = currentListItems.get_item("Title");
  96. var itemImageURL = currentListItems.get_item("ImageUrl");
  97. document.getElementById('lblTitle').innerHTML += itemTitle + ",";
  98. if (itemImageURL != "" && itemImageURL!=null) {
  99. imageStr += "<img src='" + itemImageURL.get_url() + "' alt='No Image' />";
  101. }
  102. }
  103. document.getElementById('image').innerHTML = imageStr;
  105. }
  106. }
  108. function OnGetListItemFailure(sender, args) {
  109. alert('Failed to get user name. Error:' + args.get_message());
  110. }
note

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.