dataset : loop on nested objects

MelodyNelson

Link to test case: https://live.datatables.net/vuzewaqo/1/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi,

I'm trying to deal with a new data format for a dataset created by the application I'm using.

I've created a « light » version in this test case :
https://live.datatables.net/vuzewaqo/1/edit

I'm using data render and I'm reaching my JS limits for 2 things in this exemple :

1) In the first column called Affaire, I want to add the data of the column CDP but I think because they don't have the same nature (variable / object), I don't know the right syntax

2) The column Materiel should contain the values of a nested object (it could be empty, have one or multiple values).
I think I should make a loop on this object like in the example bellow but I didn't have any success so far tonight with the syntax inside the render.

https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_nested

Do you have any clues to help me understand ?
(maybe I will be better with JS code after a night of sleep...)

Thanks

colin

I took a look but I'm not clear what you're expecting to go into that column Could you say what you're expecting, and why - that would help work out the logic.

Colin

kthorngren

Here is one of many ways to do this:

1. Use this syntax to access the first element in the array: row['cdp'][0]['libelle']. If the array can have multiple elements then use the solution in 2.
2. Use your favorite Javascript looping technique to loop through the array to build a new array of values. Use [Javascript join()] to join the array with <br> into a string.

Updated example:
https://live.datatables.net/vuzewaqo/2/edit

Kevin

MelodyNelson

Thanks for you answers.

@Colin : Sorry if I'm not clear enough, I'm dealing with english too.
For the first point, the finality is to use the content of a hidden column (CDP in this case) in another column. But I didn't explain this part and tried to simplify my question.

@Kevin : Thanks for your answer and the updated example.
But the data generated by the App doesn't create empty objects.
If the original data doesn't contain a value for « cdp » or « material », I will have JS error and the table won't show.
I understand why because we refer to something who doesn't exist but I don't know how to add this control, it's not like controlling a simple variable (at my level of course...)

MelodyNelson

I'm trying to explain more the « empty objects » in the dataset
When the data doesn't exist, the App is returning this kind of code :

"cdp": [],

kthorngren

Use an if statement to check the length of the array. I updated the test case with one row having "cdp": [],. See both the Code_affaire and cdp.0 columns for the if statements.
https://live.datatables.net/vuzewaqo/6/edit

Kevin

MelodyNelson

Thank you Kevin.
I will watch in details your answer tomorrow.
I'm trying to find a way in the App to receive a better dataset content because I have too much information not needed and also a lot of duplicate data. I already find a way to deal with the data for the column CDP (and other data who can only have one value). I'm trying to have a more minimalist dataset, it's more « readable » for me and maybe it's better for the performance too.

MelodyNelson

Thanks Kevin for your help. My datatable is almost finished, still need to deal with a few bugs.

I've changed the dataset for some data and keep the same format for the one with multiple values.

In the case of column cdp, it's now like that :

"cdp": {
            "Code_affaire": "BC23-FV149",
            "Code_rubrique": "CH",
            "Valeur_alpha": "FV",
            "Valeur_date": "0000-00-00",
            "Valeur_num": 0,
            "num_ordre": 0,
            "Groupe": "",
            "ID": 870028,
            "affaire": {
                "__KEY": "BC23-FV149"
            },
            "rubrique": {
                "__KEY": "CH"
            },
            "Nature": 0,
            "code": "FV",
            "libelle": "Fred V"
        },

The column cdp like that :

{ data: 'cdp.libelle' }

The insertion of cdp inside another column like that :

{ data: 'Code_affaire', // code + cdp
            render: function ( data, type, row ) {
                return "<strong><a>" + data + "</a></strong><br><span class=grey>" + row['cdp']['libelle'] + "</span>" 
                }
        },

For the column material and others who have the same structure in the dataset, I use your code and put it in a separate function to avoid duplication of code. I don't know if I did it like a pro would but it works.

// format de retour par défaut pour les rubriques multivaluées
function render_rub_multival( data, type, row ) {  
    if (type === 'display') {
        var values = [];
        for (i=0; i<data.length; i++) {
            values.push(data[i].libelle);
        }
            return values.join('<br>');
         }
    return data;
}

See for example, columns materiel, concurrent, commettant, societe here :

columns: [
        { data: null, // icônes
            render: function ( data, type, row ) {
                return "<img src='images/loupe_safari.png' class='mb2' /><br><img src='images/relancer.png' />" ;
            }
        },
        { data: 'Code_affaire', // code + cdp
            render: function ( data, type, row ) {
                return "<strong><a>" + data + "</a></strong><br><span class=grey>" + row['cdp']['libelle'] + "</span>" 
                }
        },      
        { data: 'personne', // infos personne
            render: function ( data, type, row ) {
                return '<strong>' + data.Societe + '</strong><br>' + data.Prenom +' '+ data.Nom;
            }
        },
        { data: 'personne.groupeClient', // rubrique groupe personne
            render: function ( data, type, row ) {
                // ajout prefixe et style au groupe
                var groupe = data.libelle;
                if (groupe !== "") {
                    var style = 'sticker-groupe';
                    var prefixe = 'Groupe ';
                } else {
                    var style = '';
                    var prefixe = '';
                }
                return '<span class="' + style + '">' + prefixe + data.libelle + '</span>';
            }
        },
        { data: 'config', // rubrique multivaluée (avec format spécial)
            render: function ( data, type, row ) {              
                // description différente en fonction de la societe
                var societe = row['societe'][0]['libelle'] ;                
                if ( societe.startsWith("Bobst") ) {
                    var description = row['materiel'][0]['libelle'];
                } else {
                    var description = row['Libelle_affaire'];
                }               
                // affichage description + config
                if (type === 'display') {
                    var values = [];
                    for (i=0; i<data.length; i++) {
                        values.push(data[i].libelle);
                    }
                        return '<strong>' + description + '</strong><br>' + values.join('<br>');
                     }
                return data;
                }
        },
        { data: 'materiel', // rubrique multivaluée
            render: render_rub_multival
        },
        { data: 'Montant4'}, // montant offre
        { data: { // date offre
            _: 'dateOffre',
            display: 'dateOffre.libelle',
            sort: 'dateOffre.Valeur_date'
            }
        },
        { data: 'numeroOffre.libelle' }, //  numéro offre
        { data: 'instalPrev.libelle' }, // installation prévisionnelle
        { data: 'avancement', // avancement (étoiles)
            render: function ( data, type, row ) {
                return '<span class="nodisplay">'+ data.code + '</span><span class="rubrique-qu qu-' + data.code + '"></span>' ;
            }
        },
        { data: 'Montant2' }, // realisation
        { data: 'Montant3' }, // reussite
        { data: 'concurrent', // rubrique multivaluée
            render: render_rub_multival
        },
        // A FAIRE : BESOIN DU CODE POUR LES ACTIONS
        { data: null, defaultContent: "visite projet"},
        { data: null, defaultContent: "visite client"},
        
        // colonnes masquées
        { data: 'instalPrev.libelle', // annee de instalPrev
            render: function ( data, type, row ) {
                var annee = data.substring(0, 4) ;
                return annee ;
            }
        },
        { data: 'societe', // rubrique multivaluée
            render: render_rub_multival
        },
        { data: 'commettant', // rubrique multivaluée
            render: render_rub_multival
        },
        { data: 'typeVente.libelle' },
        { data: 'cdp.libelle' },
        { data: 'Libelle_affaire' }
    ],

allan

Looks good to me - code reuse is a good thing!

Allan

MelodyNelson

Thanks Allan