Get Host Web List data in SharePoint-Hosted App

In this blog we will learn how to get Host Web List data in SharePoint-Hosted Ap.

Please follow the below steps:

Steps:

1. Create a list in the main site (Host web) as below:
   
   
   
   
2. Open Visual Studio à Create a new SharePoint App Project.
   
   
   
   
3. Select the Host for the app as “SharePoint-Hosted”.
   
   
4. Once the project is created, you will find the below structure.
   
   
   
   
5. Add the below code to the App.js file.

5. var appWebContext;
   var listResult;
   var hostweburl;
   
   $(document).ready(function () {
       getListData();
   });
   
   function getListData() {
       appWebContext = new SP.ClientContext.get_current();
       hostweburl = decodeURIComponent($.getUrlVar("SPHostUrl"));
       var hostwebContext = new SP.AppContextSite(appWebContext, hostweburl);
   
       var list = hostwebContext.get_web().get_lists().getByTitle('TestList');
       alert(list);
       var query = new SP.CamlQuery();
       query.set_viewXml("<View><Query><Where><Contains><FieldRef Name='Title' /><Value Type='Text'>Test</Value></Contains></Where></Query></View>");
       listResult = list.getItems(query);
       appWebContext.load(listResult);
       appWebContext.executeQueryAsync(onSucceded, onFailed);
   }
   
   function onSucceded(sender, args) {
       var enumerator = listResult.getEnumerator();
       while (enumerator.moveNext()) {
           $('#message').append(" " + enumerator.get_current().get_item("Name"));
       }
   }
   
   function onFailed(sender, args) {
       alert('Failed to get host web: ' + args.get_errorDetails());
   }
   // jQuery plugin for fetching querystring parameters
   jQuery.extend({
       getUrlVars: function () {
           var vars = [], hash;
           var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
           for (var i = 0; i < hashes.length; i++) {
               hash = hashes[i].split('=');
               vars.push(hash[0]);
               vars[hash[0]] = hash[1];
           }
           return vars;
       },
       getUrlVar: function (name) {
           return jQuery.getUrlVars()[name];
       }
   });

6. Go to AppManifest.xml à Permissions tab. We need to give permission to the app to access the host web. Select “SiteCollection” Permission Level ”Manage” (I have given Manage, since I am planning to edit the data as well, which I will do later). Read permission can also be given.
   
   
7. Deploy the solution, Trust  the app.
   
   
8. You will the data from the “Name” column of the host web list “TestList” on the App page. [The formatting of the data shown in App default page is not done presently].