dataset : loop on nested objects

dataset : loop on nested objects

MelodyNelsonMelodyNelson Posts: 132Questions: 21Answers: 2

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

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,226Questions: 1Answers: 2,593

    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

  • kthorngrenkthorngren Posts: 20,793Questions: 26Answers: 4,860
    edited September 2023 Answer ✓

    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

  • MelodyNelsonMelodyNelson Posts: 132Questions: 21Answers: 2

    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...)

  • MelodyNelsonMelodyNelson Posts: 132Questions: 21Answers: 2

    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": [],

  • kthorngrenkthorngren Posts: 20,793Questions: 26Answers: 4,860
    Answer ✓

    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

  • MelodyNelsonMelodyNelson Posts: 132Questions: 21Answers: 2

    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.

  • MelodyNelsonMelodyNelson Posts: 132Questions: 21Answers: 2

    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' }
        ],
    
  • allanallan Posts: 62,484Questions: 1Answers: 10,262 Site admin

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

    Allan

  • MelodyNelsonMelodyNelson Posts: 132Questions: 21Answers: 2

    Thanks Allan

Sign In or Register to comment.