Thank you for visiting my site!

Home / REST API/jQuery / REST API – jQuery – using List Items

REST API – jQuery – using List Items



Html file to add to the Content Web Editor.


<script type="text/javascript" src="/dev/SiteAssets/webparts/Lists/ItemsView.js"></script>
<div id="divListItems"></div>

 


$(function () {
    retriveListItems();
});
 
function retriveListItems() {   

let siteUrl = _spPageContextInfo.webAbsoluteUrl;    
//http://store.patterns-online.com/dev/_api/SP.UserProfiles.PeopleManager/GetMyProperties // view all user properties
//let fullUrl = siteUrl + "/_api/web/lists/GetByTitle('Designers%20Contact%20Information')/items?$select=Title,website,phone,Author/ID,Author/Title&$expand=Author/ID,Author/Title";
let fullUrl = siteUrl + "/_api/web/lists/GetByTitle('Contacts Designers')/items";
  
  $.ajax({        
        url: fullUrl,        
        type: "GET",        
        headers: {            
            "accept": "application/json;odata=verbose",            
            "content-type": "application/json; odata=verbose",        
        },        
        success: onQuerySucceeded,        
        error: onQueryFailed    
    }); 
}
function onQuerySucceeded(data) {  
    let length = data.d.results.length;
    console.log(data);  
    let listItemInfo = '';  

    listItemInfo += '<table class="table table-striped"><thead ><tr>';
    listItemInfo += '<th scope="col" style="display:none">Id</th>';
    listItemInfo += '<th scope="col">Title</th>';
    listItemInfo += '<th scope="col">Phone</th>';
    listItemInfo += '<th scope="col">Email</th>';
    listItemInfo += '<th scope="col">Website</th>';

    listItemInfo += '</tr></thead><tbody>';
      
    for (let i = 0; i < length; i++) {  
        let item = data.d.results[i];
        let id = item.Id;
        let title = item.Title 
        let phone = item.phone != null ? item.phone: "";
        let email = item.Email_x0020_Personal != null ? item.Email_x0020_Personal : "";
        let website = item.website != null ? item.website.Url : "";
        let photo = item.Photo != null ? item.Photo.Url : "";

        listItemInfo += '<tr>';
        listItemInfo += '<th style="display:none">'+ id + '</th>';
        listItemInfo += '<td> ' + title + '</td>'; 
        listItemInfo += '<td>' +  phone + '</td>';
        listItemInfo += '<td>' +  email + '</td>';  
        listItemInfo += '<td>' +  website + '</td>'; 
        listItemInfo += '<td style="width:100px"><img src="' + photo + '" class="img-fluid"></td>';
        listItemInfo += '</tr>';	        
    }
 
    listItemInfo +='</tbody></table>';   
 
    $("#divListItems").html(listItemInfo); 
}
 
function onQueryFailed(sender, args) {    
    alert('Error!'); 
}

ADD YOUR COMMENT