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. });
   9. function ViewGrid()
   10. {
   11. ko.applyBindings(new TestListViewModel());
   12. }
   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.