Javascript sourced data problem

MrJeje

Hi, I followed the tutorial you gave about Javascript sourced data.

My problem is, when I get my datas from a json, they are like this :

[["Pierre","Vincent","Vincent","Vivien","Pierre","Vivien","Khaled","Jeremy","Frederic","Pierre","Vivien","Tom","Frederic","Vivien","Jean-Vitus","Khaled","Romain","Matheo","Jean-Vitus","Khaled","Frederic","Tom","Pierre","Vincent"],["Aveyron nature","Aveyron nature","Green citizen","Renecore Apps","NS Interne","NS Interne","NS Interne","NS Interne","NS Interne","TRACK","TRACK","TRACK","TRACK","FormBuilder","ecoReleve Data","ecoReleve Data","ecoReleve Data","ecoReleve Data","Tuyaux (Bonna)","Tuyaux (Bonna)","Data Centralization","eCollection","ecoBalade","AO"],["21","27","19","4","13","13","22","54","3","18","4","32","10","23","23","9","33","46","16","7","38","18","7","6"]]

So there is 3 tables, the first one is for the hours, the second one is the employes, the third is the projects they worked one, so for exemple "Pierre worked 21h on Aveyron nature"

So I use a method to convert the result and put it in a variable with this method :

 var getdatafromurlNEW = function(myurl)
             {
                 var exist = null;
                 console.log("getdatafromurlNEW", myurl);
                 $.ajax({
                     url: myurl,
                     async: false,
                     success: function(result){
                         exist = result;
                     },
                     error: function(xhr){
                         console.log("error NEW", xhr);
                         DemanderNouveauSprint();
                     }
                 });
                 return (exist);
                 console.log('coucou',exist)
            };

Add the datas of the json in a variable :

var test = getdatafromurlNEW("http://localhost/ScrumManager/api/www/action/gethourdown/105");

(the http://localhost/ScrumManager/api/www/action/gethourdown/105 is just the json result, the 3 tables )

So then I add the datas of the variable in the datable like this :

$(document).ready(function() {
                $('#datatable').DataTable({
                    data: test,
                    columns: [
                        { title: "employes" },
                        { title: "project" },
                        { title: "hours" }
                    ]
                } );
            } );

And then I got this : (picture "resultat.pnj" or here )

I guess it's because how I fill my json.

I logged the result of the variable too if it can help, it look like this -> here

I can save each array in a different variable too

var employes = test[0];
var project = test[1];
var hours = test[2];

Any way to fix it ?
Thanks

kthorngren

Change your data to be grouped by rows not columns. This link should should help explain:
https://datatables.net/manual/data/#Arrays

Kevin

MrJeje

Do you mean
- When I create the datatable in the javacript part ?
- Or when I create the Json, the way I created the 3 tables ?

I can't use each array I got ?
Filling the first column with array [0]
The second one with the array [1]
etc.. ?

MrJeje

I tried by feeling the DataTable like this

$(document).ready(function() {
                $('#datatable').DataTable({
                    data: test,
                    columns: [
                        { data: test[0] },
                        { data: test[1] },
                        { data: test[2] }
                    ]
                } );
            } );

But ended with a DataTable empty, and when I click in the empty rows, I got the data in an error message.
For exemple if I click on the project one, I got this

I guess it produce this error because the data source object for the row had no 'Name' parameter

tangerine

Why don't you return the data from the database in the format required by your table?

MrJeje

Because the datas you see are from a sql request who fill the datatable from a certain sprint, exemple the one I shared before are from the sprint 106.
So I want to use an input list and when I select a new number, it ask back the databases to give the json with the infos of the good sprint number, and then, put the infos in the datatable, so each time I select a new number, it update the datatable with the good infos.
Here is an exemple about how it can look like, so each time I select a new number, I need to do again the request with the new number to get the datas from the good sprint, and fill back the datatable with the good infos.
(btw you see the datable fill in the screenshot but it's because it get datas directly from a request, not by a function who try to fill it with the getdatafromurlNEW function.

allan

Yes, DataTables required information by row, not by column. There is no option to change that I'm afraid. You would need to either modify the data before it is sent to the client, or transform it on the client-side before your give it to DataTables into being row based.

Allan

MrJeje

Thanks for all the help then I will try to change what I can.
And thanks alot for this awesome plug-in.

MrJeje

[News]
I had each arraw in different variable, I had the idea to create a loop who place each data at the good place. So with this :

var enfin = "[";

for (i = 0; i < hours.length; i++) {
            enfin += "[\"" + test[0][i]+"\",\""+test[1][i]+"\",\""+ test[2][i] + "\"],";
            }
enfin = enfin.slice(0, -1);
enfin += "]"
console.log(enfin);

I can get all values in a good format. here

So then I use this way :

$(document).ready(function() {
                $('#datatable').DataTable({
                    data: enfin
                } );
            } );

Because the datas I got are same as this exemple https://datatables.net/manual/data/#Arrays

A variable, with all the datas in. But when it try to create the dataTable, I got this error
here

Any way to fix it ?

MrJeje

Ok, my fault, I forget to add back the "<th>" for the datatable, so added it back like this :

<table id="datatable" class="table table-striped table-bordered">
        <thead>
                 <tr>
                        <th>Employé(e)</th>
                        <th>Projet</th>
                        <th>Heure(s)</th>
                </tr>
        </thead>
</table>

And new error.. The one I had before here

MrJeje

I even tried to change the display of the data with this :

data += "{\n\"name\": \"" + test[0][i]+"\",\n \"project\": \""+test[1][i]+"\",\n \"hours\": \""+ test[2][i] + "\"\n},\n";

So if I log the variable, it show like this : here

Then I changed the datatable function like this :

$(document).ready(function() {
                $('#datatable').DataTable({
                    data: data,
                    columns: [
                        { data: 'name' },
                        { data: 'project' },
                        { data: 'hours' }
                    ]
                } );
            } );

But when I load the page, it show an error again :
here

kthorngren

The problem is data is a string. It needs to be a Javascript Object with properties of name, projects, hours.

Kevin

MrJeje

Is there a way to transform this variable to a javacript one ?

kthorngren

Maybe something like this:

var data = []
for (i in test) {
  data.push({name: test[0][i], project: test[1][i], hours: test[2][i]});
}

Kevin

MrJeje

Meanwhile you answered, I searched and found the "variable = eval(variable)" way so I used it like this

data += " [\n"
for (i = 1; i < hours.length; i++) {
       data += "{\n\"name\": \"" + test[0][i]+"\",\n \"project\": \""+test[1][i]+"\",\n \"hours\": \""+ test[2][i] + "\"\n},\n";
 }
data = data.slice(0, -1);
data += "\n]"
data = eval(data);

But your is like only 2 lines and work too ! So if someone find this topic and for any reason your doesn't work, I'm happy to show mine too, but it's a factory if I compare to your who is really smooth.

Thanks alot, it work perfectly!

allan

Don't use eval .

If its pure JSON then use JSON.parse().

Allan

MrJeje

Oh ok
Also thanks for the help Allan!