SharePoint Knockout js :- Get items from SharePoint List using Knockout js

By: Unknown on 00:00

Share it Please

Tweet

1.Create a Custom List Name as "Emp" and Create a below Column Name

2.Create one Content Editor WebPart and  paste the below code

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>   
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/knockout-3.3.0.js"></script>   
<script src="https://SiteCollectionUrl/sites/DevSite/Style%20Library/ko.sp-1.0.min.js"></script>   

<script type="text/javascript"> 
function altRows(id){
if(document.getElementsByTagName){  

var table = document.getElementById(id);  
var rows = table.getElementsByTagName("tr"); 
 
for(i = 0; i < rows.length; i++){          
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}      
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>

<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>  

<script>   
   
    ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js");   
    var completeEmployeeList = null;   
   
     
    function EmployeeList(title, firstname, lastname, location) {   
        var self = this;   
        self.Title = title;   
        self.FirstName = firstname;   
        self.LastName = lastname; 
        self.Location = location;   
    }   
       
    
    function EmployeeListViewModel() {   
        var self = this;   
       
        self.Employees = ko.observableArray([]);   
        self.AddEmployees = function (title, firstname, lastname, location) {   
            self.Employees.push(new EmployeeList(title, firstname, lastname, location));   
        }   
    }   
   
    function MainFunction() {   
        completeEmployeeList = new EmployeeListViewModel();             
        retrieveListItems();               
        ko.applyBindings(completeEmployeeList);   
    }   
   
    function retrieveListItems() {   
        var clientContext = new SP.ClientContext.get_current();   
        var oList = clientContext.get_web().get_lists().getByTitle('Emp');   
        var camlQuery = new SP.CamlQuery();   
        camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");   
        this.collListItem = oList.getItems(camlQuery);   
        clientContext.load(collListItem);   
        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));   
    }   
   
    function onQuerySucceeded(sender, args) {   
        var listItemInfo = '';   
        var listItemEnumerator = collListItem.getEnumerator();   
        while (listItemEnumerator.moveNext()) {   
            var currentItem = listItemEnumerator.get_current();   
            completeEmployeeList.AddEmployees(currentItem.get_item("Title"), currentItem.get_item("FirstName"), currentItem.get_item("LastName"), currentItem.get_item("Location"));   
        }   
    }   
   
    function onQueryFailed(sender, args) {   
        alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());   
    }   
</script>   
   

<div id="divEmployeeList">   
   
    <h2>SharePoint with Knockout js Example</h2>   
    <br />   
   
  <table class="altrowstable" id="alternatecolor">
        <thead>   
            <tr>   
                <th>Title</th>   
                <th>FirstName</th>    
                <th>LastName</th>    
                <th>Location</th>   
            </tr>   
        </thead>   
        
        <tbody data-bind="foreach: Employees">   
            <tr>   
                <td data-bind="text: Title"></td>   
                <td data-bind="text: FirstName"></td> 
                <td data-bind="text: LastName"></td>    
                <td data-bind="text: Location"></td>   
            </tr>   
        </tbody>   
    </table>   

</div>  

output:-