0

I have a search page, where user enter fields and click on search button. Then I am making ajax call to Sharepoint 2013 list with search query and fetching data. After fetching data I am binding data to Kendo grid.

This SharePoint list contains different type of fields like: look up, choice, text field. Data from choice column, text field types are getting bind to grid easily, I am able to see the data too. But data from look up columns is not being seen in Kendo Grid.

Instead of data, its showing

[object Object]

Below is the code of ajax call I am making and in success I am binding data to Kendo Grid.

function fetchData(webUrl, filterString){
    $.ajax({
        url: webUrl +"/_api/web/lists/getByTitle('Inventory')/Items?$filter="+filterString,
        method: 'get',
        contentType: 'application/json;odata=verbose',
        headers:{
            'X-RequestDigest': $('#__REQUESTDIGEST').val(),
            'Accept': 'application/json;odata=verbose'
        },
        success: function(data){
            var grid = $('#grdInventory').getKendoGrid();
            grid.dataSource.data(data.d.results);
            grid.refresh();
        }
    });
}
  • Below is the screenshot of the Grid: In Grid=

ID, short description, Analytic ID, Analytic Name are text type column

Production status is choice column,

State, Platform are look up column in SharePoint

I circled the errors which is being seen

  • Below is the screenshot of data being seen in Browser Console:

Circled lookup Columns

Can anyone please help me or give me hint of how to display look up column data in Kendo Grid.

1

Before passing data.d.results to the grid you will probably want to modify it or create a new array of key/value pairs. Some field types that will probably need some modifications:

  • Multichoice
  • Taxonomy
  • DateTime
  • Lookup
  • Possibly, multiline fields with rich text enabled

for example, you want something like this (I didn't run or tested this code):

for(var i; i < data.d.results.length; i++){   
   for(var field in data.d.results[i] ){
      if(data.d.results[i][field] && data.d.results[i][field].Value){
           data.d.results[i][field] = data.d.results[i][field].Value;
      } 
      // if(field == 'State') {// do something with data.d.results[i][field]}
   }
}

It's a very simplistic example. If we want to properly convert the data, we need a separate REST call to get the list fields so that we can get field types as well. Right now, we can only guess what type is inside the field value.

JavaScript enhancement: Array forEach method instead of a for loop

(source: http://www.w3schools.com/jsref/jsref_obj_array.asp)

The above for loop can be rewritten to use the JavaScript forEach method on an Array.
Shorter, easier to read and use:

data.d.results.forEach(function(result){
    for(var field in result ){
        if(result[field] && result[field].Value){
            result[field] = result[field].Value;
        }
        // if(field == 'State') {// do something with data.d.results[i][field]}
     }
});
  • 1
    Strictly speaking it is an Object with key/value pairs, not an Array. Quick and dirty examination can be done with the toString method of an Object: data.d.results[i][field].toString() – Danny '365CSI' Engelman Oct 27 '16 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.