Binding Sharepoint list data to kendo grid

Question

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

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

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

Answer 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]}
     }
});