Objects to Arrays

Khalid Teli

Hoe can I reterive JSON from OBJECTS to ARRAY something like this:
x(177) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},  …]

To

x(177) [Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), Array(17), …]

I tried using data().toArray()but doesnt work the code I use is
data = table.rows().data() but it gives output as an array of objects

rf1234

The question is: Why would you need to do this? In Javascript an array of objects works fine. Very much like an associative array in PHP. You can loop through it; extract just the values from it - whatever you like. Like in here for example:

var selected = dt.rows( {selected: true} ).data().toArray();
var contractIdArray = [];
$.each(selected, function(key, value) {
    contractIdArray.push(value.contract.id);
})

Khalid Teli

@rf1234 Thank you but I am not getting my head around.

The problem is that Is When I receive the complex nested object data from server in this format and when I read the rows , the format is like this
**0: {DT_RowId: "row_100758", contract_bal: {…}, contract_info: {…}, products: {…}}
...
...
**

Once I receive this data , I want to use this data to feet to my High-charts plugin.(which I did successfully did before with out using Editor).

Before it was working and the data I received was in this format and easy to feed to high charts :

0: (17) ["5873", "Fries 11x11 (7/16)", "XYZ Foodservice", "5184", "0", "0", "0", "0", "0", "5184", "2208", "29
...
...
this data gets easily fed to the high charts plugin.

This is the reason i want to change from the array of data objects to simple array.

This is the code I use , it fails in editor however it works in normal DataTables:

$('.toggleCols').click(function () {

var data = table.rows().data();

console.log(data) ;
  var categories = []; 
  var series_data = [];
  var series_datatwo = []; 

  for (var i = 0; i < data.length; i++) {
     categories.push(data[i][2])
       series_data.push(data[i][3])
       series_datatwo.push(data[i][4])

  }
   plotChart(categories, series_data,series_datatwo);

} );

});

kthorngren

For Datatables and especially with Editor using object based data is much easier and generally preferred. I would use two different Ajax data sources; one to return array data for Highcharts and the other to return object data for Datatables and Editor. This way Highcharts and Datatables aren't reliant on the data for the other plugin.

The other choices are to configure Highcharts and Datatables to either use array or object data or to convert the object data to array data for Highcharts.

Kevin

Khalid Teli

@kthorngren
Thank you very much.
I am trying t convert the object data to array data for High-charts but no luck yet.
Can you please give me few hints how can I do that

Your help is much appreciated

kthorngren

Thats a general Javascript question, not specific to Datatables. Use Stack Overflow to find ways to do this. Maybe this SO thread will help.

Kevin

Khalid Teli

@kthorngren
Thank you I figured it out. Just in case someone else wants to use Highcharts with Editor, I am pasting my code below:

$('.toggleCols').click(function () {

var plainArray = table.columns().data().toArray();

for (var i=0;i<plainArray.length;i++)
{

categories = plainArray[1]  
var data_one = plainArray[2].map(Number);
var data_two = plainArray[3].map(Number);

}
plotChart(categories, data_one,data_two)

});

---

function plotChart(categories, data_one,data_two) {

Highcharts.chart('containergraph', {
chart: {
type: 'column'
},
title: {
text: 'Members Vs Total Open Balance'
},
xAxis: {

   type: 'categoryyyy',
    uniqueNames: true,
    categories: categories
},
yAxis: [
  {
    // first yaxis
    title: {
      text: "Values",
    }
  },
  {
    // secondary yaxis
    title: {
      text: "Values"
    },
    min: 0,
   opposite: true
  }
],
series: [{
  name: 'Open Balll',
  data: data_one
},

{
name: 'Remaining Balll',
data: data_two,
color: "#FF404E",
type: "spline",
// yAxis: 1
}

]

});

}