Retrieve All Lists and Fields in SharePoint 2013 Using JavaScript (JSOM)

This article shows how to write code to perform basic operations using the JavaScript client object model in SharePoint 2013.

You can use the SharePoint client object model to retrieve, update and manage data in SharePoint 2013. SharePoint makes the object model available in several forms.

  • .NET Framework redistributable assemblies.
  • JavaScript library.
  • REST/OData endpoints.
  • Windows Phone assemblies.
  • Silverlight redistributable assemblies.

This article shows how to perform basic operations using the JavaScript object model. You can add a reference to the object model using HTML <script> tags.

The following sections describes tasks that you can complete programmatically and they include JavaScript code examples that demonstrate the operations.

Procedure

Open your SP Site in SharePoint 2013 Designer. Then select an Assets icon in the designer ribbon to add a JavaScript file.



After adding a JavaScript file the file is available in the SharePoint Site Assets Folder.



Go to the SP site page and add a new page to the SharePoint site.





After addiing the page select an Insert button in the Ribbon Menu.



Then add a Content Editor Web part into the page.



Edit the WebPart and add a JavaScript file link to the content link.



Save the web part and save the page in site. Click the button.



List Created Successfully.

Source Code

  1. <div><button onclick=" retrieveAllListsAllFields ()">Click here to AddaFieldtoList</button></div>  
  2.   
  3. <div id="displayDiv"></div>  
  4. <script type="text/javascript">   
  5. function retrieveAllListsAllFields()  
  6.     {  
  7. var siteUrl="https://gauti.sharepoint.com/sites/sp";  
  8. var clientContext = new SP.ClientContext(siteUrl);  
  9. var oWebsite = clientContext.get_web();  
  10. var collList = oWebsite.get_lists();  
  11.   
  12. this.listInfoArray = clientContext.loadQuery(collList,   
  13. 'Include(Title,Fields.Include(Title,InternalName))');  
  14.   
  15. clientContext.executeQueryAsync(  
  16. Function.createDelegate(thisthis.onQuerySucceeded),   
  17. Function.createDelegate(thisthis._onQueryFailed)  
  18. );  
  19.     }  
  20.   
  21. function onQuerySucceeded()   
  22.     {  
  23. var listInfo = '';  
  24.   
  25. for (var i = 0; i < this.listInfoArray.length; i++)   
  26.     {  
  27. var oList = this.listInfoArray[i];  
  28. var collField = oList.get_fields();  
  29. var fieldEnumerator = collField.getEnumerator();  
  30.   
  31. while (fieldEnumerator.moveNext())   
  32.     {  
  33. var oField = fieldEnumerator.get_current();  
  34. var regEx = new RegExp('name''ig');  
  35.   
  36. if (regEx.test(oField.get_internalName()))   
  37.     {  
  38. listInfo += '\nList: ' + oList.get_title() +   
  39. '\n\tField Title: ' + oField.get_title() +   
  40. '\n\tField Name: ' + oField.get_internalName();  
  41.     }  
  42.     }  
  43.     }  
  44. alert(listInfo);  
  45.     }  
  46.   
  47. function onQueryFailed(sender, args)   
  48.     {  
  49. alert('Request failed. ' + args.get_message() +   
  50. '\n' + args.get_stackTrace());  
  51.     }  
  52. </script>  
Thanks for reading my article.