Retrieve the linked list of a lookup with JavaScript in Sharepoint 2013

Question

I have two lists: Products and Suppliers.
In Products, i have 3 columns :

-Name of Product (single line of text)

-Supplier (lookup of Suppliers : Name of Supplier)

-Price (choice list)

In Suppliers, i have 3 columns too :

-Name of Supplier (single line of text)

-Product (lookup of Products : Name of Product)

-Category (choice list)

Actually, in the .js linked to Product (list), i'm using this code to get the informations of the list Suppliers

var oList = clientContext.get_web().get_lists().getByTitle('Suppliers');

But it's hardcoded and i have to dynamise the code so i will be able to apply this code to other lists.

For example:

var NameOfList = "code to get the name of the list which is linked by the lookup (in my case it's the list Suppliers)";
var ColumnsOfList = "NameOfList.getAllColumns (in my case it's Name of Supplier, Product, Category)";
var oList = clientContext.get_web().get_lists().getByTitle(NameOfList);  

var txt = [];
txt.push('The list ' + NameOfList + ' has those columns : ');
for(i=0 ; i<ColumnsOfList.length ; i++){
  txt.push(ColumnsOfList[i]);
}
alert(txt);

It will display The list Suppliers has those columns : Name of Supplier, Product, Category.

So, i would like to know which code or function to use for retrieve the listname and columns of the list which is linked by lookup. In my case, i would like to get "Suppliers" as listname and "Name of Supplier, Product, Category" as columns name.

Can someone help me please ?

EDIT : enter image description here

Answer 1

You can get the details of the lookup column by retrieving it from the field collection using SPList.get_fields().getByInternalNameOrTitle(), invoking executeQueryAsync(), and then examining the lookup column's schema XML (via the SPField.get_schemaXml() method).

From the column's schema XML you can grab the lookup column's source list and run another executeQueryAsync() to load up its field collection so you can get the names of all its fields.

Here's an example of how your code might appear.

var listName = "Products";
var lookupColumn = "Supplier";

var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle(listName);

// get a reference to the lookup field on the current list
var lookupField = list.get_fields().getByInternalNameOrTitle(lookupColumn);

 // queue up the lookup field for retrieval
 clientContext.load(lookupField);   
 clientContext.executeQueryAsync(
      function(){ 

           // get the lookup list GUID from the lookup column's schema XML:
           var lookupListId = lookupField.get_schemaXml().match(/List=(.*?)(?!\S)/g)[0].match(/[^List="][^"]*/)[0];

           // get references to the lookup list and its field collection
           var lookupList = clientContext.get_web().get_lists().getById(lookupListId);
           var lookupListFields = lookupList.get_fields();

           // queue up the lookup list and field collection for retrieval
           clientContext.load(lookupList);
           clientContext.load(lookupListFields);
           clientContext.executeQueryAsync(
               function(){
                   var lookupListName = lookupList.get_title();
                   var fieldNames = [];

                   // enumerate through the field collection to get the field names
                   var fieldEnum = lookupListFields.getEnumerator();
                   while(fieldEnum.moveNext()){
                       var field = fieldEnum.get_current();
                       fieldNames.push(field.get_title());
                   }

                   doSomethingWithListAndFieldNames(lookupListName,fieldNames);

               },
               function(sender,args){alert(args.get_message());}
          );
      },
      function(sender,args){ // onError
           alert(args.get_message());
      }
 );

Replace doSomethingWithListAndFieldNames() with your own function.

Getting only the fields from the default view:

If you only want the fields that display in the default view of the lookup list, you need to do a little extra work to query the views of the lookup list and look for the default view, then get the view fields from that view.

var listName = "Products"; // original list title
var lookupColumn = "Supplier"; // lookup column name

var clientContext = new SP.ClientContext();
var list = clientContext.get_web().get_lists().getByTitle(listName);

// get a reference to the lookup field on the current list
var lookupField = list.get_fields().getByInternalNameOrTitle(lookupColumn);

// queue up the lookup field for retrieval
clientContext.load(lookupField);   
clientContext.executeQueryAsync(
      function(){ 
           // get the lookup list GUID from the lookup column's schema XML:
           var lookupListId = lookupField.get_schemaXml().match(/List=(.*?)(?!\S)/g)[0].match(/[^List="][^"]*/)[0];

           // get reference to the lookup list
           var lookupList = clientContext.get_web().get_lists().getById(lookupListId);

           // queue up the lookup list for retrieval
           clientContext.load(lookupList);
           clientContext.executeQueryAsync(
               function(){
                   var lookupListName = lookupList.get_title();

                   // get the views on the list
                   var views = lookupList.get_views();

                   // queue up the viewsfor retrieval
                   clientContext.load(views);
                   clientContext.executeQueryAsync(
                       function(){

                            // loop through the views until you find the default view
                            var viewEnum = views.getEnumerator();
                            while(viewEnum.moveNext()){
                                var view = viewEnum.get_current();
                                if(view.get_defaultView()){

                                     // retrieve the fields from the view
                                     var lookupListFields = view.get_viewFields();
                                     clientContext.load(lookupListFields);
                                     clientContext.executeQueryAsync(
                                         function(){
                                              var fieldNames = [];

                                              // enumerate through the field collection to get the field names
                                              var fieldEnum = lookupListFields.getEnumerator();
                                              while(fieldEnum.moveNext()){
                                                  fieldNames.push(fieldEnum.get_current());
                                              }
                                          
                                              doSomethingWithListAndFieldNames(lookupListName,fieldNames);

                                         },
                                         function(sender,args){alert(args.get_message());}
                                     );
                                     break;
                                }                                
                            }
                       },
                       function(sender,args){alert(args.get_message());});
               },
               function(sender,args){alert(args.get_message());}
          );
      },
      function(sender,args){ // onError
           alert(args.get_message());
      }
 );