title: how to display an object in a tooltip in a datatable
body: <br>
  I create a table dynamically with data coming from an ajax response <br>
  I want to display data stored in an object in a tooltip anchored to the cell.<br>
  For the moment I manage to display my table but this one displays `[object Object]`.<br>
  What I want to do is display in element 0 of this object and display the rest in the tooltip.
  <p><a href="https://jsfiddle.net/267tgqkv/2/" rel="nofollow noreferrer">Run with jsfiddle</a></p>
  <p><strong>Here is my datasource</strong></p>
  <pre><code>var response=  {
    &quot;service1&quot;: {
      &quot;APH7&quot;: &quot;1.1.5&quot;,
      &quot;USE1&quot;: &quot;1.1.5&quot;,
      &quot;EUW1&quot;: &quot;1.1.5&quot;,
      &quot;APK2&quot;: {
        &quot;CSTG&quot;: &quot;1.0.10&quot;,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: &quot;1.0.10&quot;
      },
      &quot;APT2&quot;: {
        &quot;CSTG&quot;: &quot;1.1.5&quot;,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: &quot;1.1.5&quot;
      },
      &quot;INDW2&quot;: {
        &quot;CSTG&quot;: &quot;1.1.5&quot;,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: &quot;1.1.5&quot;
      },
      &quot;USW1&quot;: {
        &quot;CSTG&quot;: &quot;1.1.5&quot;,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: &quot;1.1.5&quot;
      },
      &quot;USW2&quot;: {
        &quot;CSTG&quot;: &quot;1.1.5&quot;,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: &quot;1.1.5&quot;
      },
      &quot;AP2&quot;: {
        &quot;CSTG&quot;: &quot;1.1.5&quot;,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: &quot;1.1.5&quot;
      },
      &quot;APS2&quot;: {
        &quot;CSTG&quot;: &quot;1.1.5&quot;,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: &quot;1.1.5&quot;
      },
      &quot;0&quot;: &quot;CD&quot;
    },
    &quot;service2&quot;: {
      &quot;APH7&quot;: 1,
      &quot;EUW1&quot;: 1,
      &quot;USE1&quot;: 1,
      &quot;APS2&quot;: {
        &quot;CSTG&quot;: 1,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: 1
      },
      &quot;USW2&quot;: {
        &quot;CSTG&quot;: 1,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: 1
      },
      &quot;USW1&quot;: {
        &quot;prd&quot;: &quot;1&quot;,
        &quot;CSTH200722&quot;: null,
        &quot;0&quot;: 1
      },
      &quot;APK2&quot;: {
        &quot;CSTG&quot;: 1,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: 1
      },
      &quot;APT2&quot;: {
        &quot;CSTG&quot;: 1,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: 1
      },
      &quot;AP2&quot;: {
        &quot;CSTG&quot;: 1,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: 1
      },
      &quot;INDW2&quot;: {
        &quot;CSTG&quot;: 1,
        &quot;CSTH&quot;: null,
        &quot;0&quot;: 1
      },
      &quot;0&quot;: &quot;BSF&quot;
    }
  }
  </code></pre>
  <p><strong>Table rendering display function</strong></p>
  <pre><code>function rendertable(data){
  
    //data from webservice
    var dataSet = data;
  
    //create table
    var table  = $(&quot;#deploymentMap_table&quot;).DataTable({
      data: constructRaws(dataSet),//tbody
      paging:   false,
      searching: false,
      info: false,
      responsive: false,
      dom: 't', //display only the table
      order: [[ 0, 'asc' ]],//order by 'service' col
      columnDefs:[
      {
        targets:'_all', 
        render:function(data){
          if(data == null) {return &quot;&quot;
        } else {return data;}
    }
  
    },
      // hide type column
      { targets: 1, &quot;visible&quot;: false},
      { targets: 0, &quot;width&quot; : &quot;200px&quot;},
  
      ],
      columns: constructColumns(dataSet),//thead 
  
      // attribute classname (background color) for services
      rowCallback: function(row, data, index){
        if(data[0] != &quot;CD&quot;){$(row).find('td:eq(0)').css('background-color', '#2f6fa6').css('color', '#fff');
        }
        else{
          $(row).find('td:eq(0)').css('background-color', '#ff961f').css('color', '#fff');
        }
    },
  
      // generate tooltip and td style
      createdRow: function( row, data, dataIndex) {
  
        $.each(row.childNodes, function(i,value){
  
          if(value.innerHTML == 1){
            value.innerHTML = &quot;BSF&quot;
          }
          else if(value.innerHTML == 2){
            value.innerHTML = &quot;PATH1&quot;
          }
  
          if( i != 0){
            if(value.innerHTML){
              $(value).addClass('td_color');
              $(value).attr('data-toggle', 'tooltip').attr('title', '&lt;div align=&quot;left&quot;&gt;Service : '+data['service']+'&lt;br&gt;version : '+value.innerHTML+'&lt;br&gt;Type :'+data[0]+'&lt;/di&gt;');
            }
          }
        })
      },
    });
  function constructRaws(data) {
    var raws = [];
    $.each(data, function(i, value) {
        
        // This code is used to display item 0 of the object
        // If I do this my object is destroyed,
        // and becomes unusable to display it in the tooltip
        //***********************************************
        //$.each(value, function(ind, val){
            // if (typeof val === &quot;object&quot;){
                //value[ind] = val[0];
            //} 
        //});
        //
        raws.push($.extend(value, {service: i}));   
    });
    return raws;
  }
  
  function constructColumns(data) {
   
    var regions = [];
    //get all regions
    $.each(data, function(i,service) {
      $.each(service, function(region) {
        regions.push(region);
      });  
    });
    regions = $.unique(regions.sort()) ;
  
    var columns = [];
    //set default columns 
    columns.push({data : 'service', title: 'Services'});
  
    //set regions columns
    $.each(regions, function(i,value) {
      if(value != &quot;service&quot;){
        columns.push({data: value, title: value });
      }
    });
    return  columns;
  }
  </code></pre>
  <p><strong>Currently the rendering is this one</strong>
  <a href="https://i.stack.imgur.com/W861Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W861Z.png" alt="enter image description here" /></a></p>
  <p><strong>And I would like it to be here</strong>
  <a href="https://i.stack.imgur.com/pryOp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pryOp.png" alt="enter image description here" /></a></p>
  <p>I don't know if the code I produced is the best one to make my table, thank you for your help.<br><br></p>
  <p>Thanks</p>