Dynamically Get the List Name in the Current Site Using CSOM-JavaScript

This article explains how to dynamically fetch the list name from the current site using CSOM-JavaScript.

Introduction

This article explains how to dynamically fetch the list name from the current site using CSOM-JavaScript.
 
Prerequisites

  1. Ensure you have access to the Office 365 online.
  2. Ensure Napa tool is available in your site.

Procedure to be followed

  1. Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then  Click here
  2. Click on the "Default.aspx" page.

    page

  3. Add a div tag with id “listnames” and place it inside the “PlaceHolderMain” tag.
     
    <div id="listNames">
    </div>

    PlaceHolderMain
     
  4. Click on the "App.js" file.

    js file

  5. Globally declare the content, web and lists objects as shown below.
     
    var context = SP.ClientContext.get_current();

    var web = context.get_web();

    var lists = web.get_lists();
     

  6. Now write the function to fetch the list names from  the current site.
     
       function getListName() {

            //load the lists object

            context.load(lists);

            context.executeQueryAsync(onGetListNameSuccess, onGetListNameFail);

      }

     

  7. The code is executed by calling "executeQueryAsync".
  8. Each "executeQueryAsync" call includes two event handlers. One handler responds if the function runs successfully, and the other handler responds if the function fails.
     

    // This function is executed if the above call is successful                               

    function onGetListNameSuccess()

    {                                                             

          var listCollection=lists.getEnumerator();

          var result="Lists in the Current site collection are:<br/><ul>";

          while(listCollection.moveNext())

          {                             

               var listName= <li>"+listCollection.get_current().get_title("Title")+"</li>";

              result=result+listName;

          }

          result=result+"</ul>";

          var insert=document.getElementById('listNames');

          insert.innerHTML=result;

    }                  

    // This function is executed if the above call fails

    function onGetListNameFail(sender, args) {

        alert('Failed to get list names. Error:' + args.get_message());

    }

     

  9. Now call the "getListName" function inside the "document.ready".
     

    $(document).ready(function () {

            getListName();

        });
     

  10. Please find the final execution of the code below.

    code

Testing

  1. Now to run the app click on the "Play" button that is available towards the left-most corner.

    Play button

  2. The app is packaged, deployed, and installed on your Office 365 Site.

    app packaged deployed

  3. Now you will be able to see the list names in the current site.

    list names in the current site

Summary

Thus in this article you saw how to dynamically get the List Name through CSOM-JavaScript.