SharePoint data with KnockoutJS (Hosted-App)

Please follow the below 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. In the default.aspx add reference to knockout.js file [the file has been downloaded and added to the project under Scripts folder].
   
   1. <scripttype="text/javascript"src="../Scripts/knockout-2.2.1.js"></script>  
   Add the below code as well in the default.aspx,
   
   1. <tableborder="1" cellspacing="0" cellpadding="10">  
   2.     <theadstyle='background-color:gray;color:white'>  
   3.         <tr>  
   4.             <td>Name</td>  
   5.             <td>Roll No</td>  
   6.         </tr>  
   7.     </thead>  
   8.     <tbodydata-bind="foreach: assignments">  
   9.         <tr>  
   10.             <tddata-bind="text: personName">  
   11.             </td>  
   12.             <tddata-bind="text: rollNo">  
   13.             </td>  
   14.         </tr>  
   15.     </tbody>  
   16. </table>  
6. Add the below code to the App.js file.
   
   1. 'use strict';  
   2. var appWebContext;  
   3. var hostweburl;  
   4. $(document).ready(function ()  
   5. {  
   6.     ViewGrid();  
   7. });  
   8.   
   9. function ViewGrid()  
   10. {  
   11.     ko.applyBindings(new TestListViewModel());  
   12. }  
   13.   
   14. function TestListViewModel()  
   15. {  
   16.     var self = this;  
   17.     appWebContext = new SP.ClientContext.get_current();  
   18.     hostweburl = decodeURIComponent($.getUrlVar("SPHostUrl"));  
   19.     var hostwebContext = new SP.AppContextSite(appWebContext, hostweburl);  
   20.     self.assignments = ko.observableArray();  
   21.     self._loadList = function ()  
   22.     {  
   23.         var clientContext = SP.ClientContext.get_current();  
   24.         var list = hostwebContext.get_web().get_lists().getByTitle('TestList');  
   25.         var query = new SP.CamlQuery();  
   26.         query.set_viewXml("<View>" + " <Query>" + " <OrderBy>" + " <FieldRef Name='Modified' Ascending='True' />" + " </OrderBy>" + " </Query>" + " <ViewFields>" + " <FieldRef Name='Modified' />" + " <FieldRef Name='Name' />" + " <FieldRef Name='RollNo' />" + " </ViewFields>" + "</View>");  
   27.         self._pendingItems = list.getItems(query);  
   28.         clientContext.load(self._pendingItems);  
   29.         clientContext.executeQueryAsync(Function.createDelegate(self, self._onLoadListSucceeded), Function.createDelegate(self, self._onLoadListFailed));  
   30.     }  
   31.     self._onLoadListSucceeded = function (sender, args)  
   32.     {  
   33.         var listEnumerator = self._pendingItems.getEnumerator();  
   34.         while (listEnumerator.moveNext())  
   35.         {  
   36.             var item = listEnumerator.get_current().get_fieldValues();  
   37.             self.assignments.push(  
   38.             {  
   39.                 rollNo: item.RollNo.toString(),  
   40.                 personName: item.Name.toString(),  
   41.             });  
   42.         }  
   43.     }  
   44.     self._onLoadListFailed = function (sender, args)  
   45.     {  
   46.         alert('Unable to load file list: ' + args.get_message() + '\n' + args.get_stackTrace());  
   47.     }  
   48.     self._loadList();  
   49. }  
   50. // jQuery plugin for fetching querystring parameters  
   51. jQuery.extend(  
   52. {  
   53.     getUrlVars: function ()  
   54.     {  
   55.         var vars = [],  
   56.             hash;  
   57.         var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');  
   58.         for (var i = 0; i < hashes.length; i++)  
   59.         {  
   60.             hash = hashes[i].split('=');  
   61.             vars.push(hash[0]);  
   62.             vars[hash[0]] = hash[1];  
   63.         }  
   64.         return vars;  
   65.     },  
   66.     getUrlVar: function (name)  
   67.     {  
   68.         return jQuery.getUrlVars()[name];  
   69.     }  
   70. });  
7. 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 late.) Read permission can also be given.
   
   
8. Deploy the solution, trust the app.
   
   
9. The Host-web list data will show up as below.