In this blog, we will see how we can use REST API with SharePoint lists to display data. Many times, we need to fetch the data from SharePoint list with the type of parameters; eg., Title, date etc.

Below are some code snippets that are useful in daily list operations. First, we need to add reference to jQuery on top of the code.
  1. <script src="/SiteAssets/JS/jquery.min.js"></script>
Get list item using ID column - The below code is used to get a specific item using default ID column of SharePoint list.
  1. $(document).ready(function() {
  2. getItems(_spPageContextInfo.webAbsoluteUrl, function(data) {
  3. var title = data.d.Title;
  4. var desc = data.d.Description;
  5. }, function(data) {
  6. alert("Ooops, an error occured. Please try again");
  7. });
  8. });
  10. function getItems(siteurl, success, failure) {
  11. $.ajax({
  12. url: siteurl + "/_api/web/lists/getbytitle('CustomlistName')/items(12)",
  13. method: "GET",
  14. headers: {
  15. "Accept": "application/json; odata=verbose"
  16. },
  17. success: function(data) {
  18. success(data);
  19. },
  20. error: function(data) {
  21. failure(data);
  22. }
  23. });
  24. }
Get all items of list order by date ascending order -The below code is used to get all items ordered by ascending date where date is of type date and time.
  1. function getListItems(siteurl, success, failure) {
  2. $.ajax({
  3. url: siteurl + "/_api/web/lists/getbytitle('CustomlistName')/items?$orderby=Date asc",
  4. method: "GET",
  5. headers: {
  6. "Accept": "application/json; odata=verbose"
  7. },
  8. success: function(data) {
  9. success(data);
  10. },
  11. error: function(data) {
  12. failure(data);
  13. }
  14. });
  15. }
Get all list items with oder by and filter - The below code is used to get all list items ordered by title having specific values in the title. We can also set selected value of drop down to valSelected variable.
  1. function getDetails(siteurl, success, failure) {
  2. var valSelected = "Specifc string to filter";
  3. $.ajax({
  4. url: siteurl + "/_api/web/lists/getbytitle('CustomlistName')/items?$orderby=Title asc&$filter=Title eq '" + valSelected + "'",
  5. method: "GET",
  6. headers: {
  7. "Accept": "application/json; odata=verbose"
  8. },
  9. success: function(data) {
  10. success(data);
  11. },
  12. error: function(data) {
  13. failure(data);
  14. }
  15. });
  16. }
Suppose, we have a custom list of type promoted links and we want to change the URL of that tile based on the current user's location; then we can add the below code to change the URL of the tile's run time.

We are using getuserprofilepropertyfor function to get office property from SharePoint user profile.
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. setURL();
  4. });
  6. function setURL() {
  7. var loginName = _spPageContextInfo.userLoginName;
  8. $.ajax({
  9. url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/getuserprofilepropertyfor(accountName=@v,%20propertyname='Office')?@v=%27i%3A0%23.f|membership|" + loginName + "%27",
  10. type: "GET",
  11. headers: {
  12. "accept": "application/json;odata=verbose",
  13. "content-Type": "application/json;odata=verbose"
  14. },
  15. success: function(data) {
  16. if (data.d.GetUserProfilePropertyFor == "OfficeLocation1") {
  17. $("#Tile_WPQ2_15_3").attr("clickaction", "PreventDefaultNavigation(); window.open(STSPageUrlValidation('\URL of ur list view to show for users having office OfficeLocation1'),'_blank'); SP.QoS.WriteUserEngagement('PromotedLinksTileClick_NewTabNavigation'); return false;");
  18. } else if (data.d.GetUserProfilePropertyFor == "OfficeLocation2" || data.d.GetUserProfilePropertyFor == "OfficeLocation3") {
  19. $("#Tile_WPQ2_15_3").attr("clickaction", "PreventDefaultNavigation(); window.open(STSPageUrlValidation(' URL of ur list view to show for users having office OfficeLocation2 or OfficeLocation3'),'_blank'); SP.QoS.WriteUserEngagement('PromotedLinksTileClick_NewTabNavigation'); return false;");
  20. } else {
  21. $("#Tile_WPQ2_15_3").attr("clickaction", "PreventDefaultNavigation(); window.open(STSPageUrlValidation('URL of ur list view to show for users having location other than above'),'_blank'); SP.QoS.WriteUserEngagement('PromotedLinksTileClick_NewTabNavigation'); return false;");
  22. }
  23. },
  24. error: function(error) {
  25. alert(JSON.stringify(error));
  26. }
  27. });
  28. }
  29. </script>
Thanks for reading this blog.