Binding SharePoint list data to Kendo grid after button click

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

That's a standard behavior, Lookup field values in that case represent a complex property and returned as object. Depending on what field from lookup list should be displayed (lets assume Title in our example), you could apply the following filter for returned data before the grid is getting displayed:

 var items = data.d.results.map(function(item){
     item.State = item.State.Title; //lets get Title from Lookup object  
     return item;
 });

and then bind the data:

var grid = $('#grdInventory').getKendoGrid();
grid.dataSource.data(items);
grid.refresh();