[BootStrap] Mise en forme d'un array dans une colonne

Version imprimable

15/06/2018, 13h31
SylvainM

[BootStrap] Mise en forme d'un array dans une colonne

Bonjour à tous,

Je tente de mettre en place un tableau en utilisant Bootstrap Table (http://bootstrap-table.wenzhixin.net.cn).
Ce tableau utilise des données au format Json.
Dans une des colonnes de ce tableau, j'ai un array de valeurs (dont le nombre peut varier d'une ligne à l'autre).
J'aimerais mettre en forme cet array avec des pour chaque valeur.

Pourriez-vous m'aider dans cette tâche ? (je pense à une boucle FOR, comme tenté dans le code ci-dessous, mais pour l'instant, je ne sais pas sur quelles variables la faire tourner)

Voici où j'en suis avec des données bidon :
http://jsfiddle.net/14wkr6ab/

Sur mon serveur, les fonctions de formatage fonctionnent, mais pas sur ce JsFiddle : je comprends pas trop pourquoi ?

Merci à vous !

Sylvain M.
15/06/2018, 14h55
Invité
Bonjour,

Merci :
- d'écrire (aussi) le code directement dans le contenu du message.
- d'être plus précis
1- Quelle est la question, précisément ? :weird:

2- "...J'aimerais mettre en forme cet array avec des pour chaque valeur..."
Quel array ?

3- "...les fonctions de formatage..."
Quelles fonctions ? Pour formater quoi ?

Merci jreaux62 de te pencher sur mon problème ! :D

Citation:

Envoyé par jreaux62

Merci d'écrire (aussi) le code directement dans le contenu du message.

Ok, je le mets ci-dessous !

Citation:

Envoyé par jreaux62

2- Quelle est la question, précisément ?

La voici : quelle fonction me permettrait, à partir d'un array contenu dans un JSON utilisé en source d'un tableau (Bootstrap Table), de convertir cet array en autant de que de valeurs de l'array.

J'ai écrit cette fonction qui arrive à le faire avec un array indépendant du JSON, et en dehors du tableau :
Code:

1 2 3 4 5 6 7 8 9 10 var liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"]; liste.forEach(createHTML); function createHTML(arrayItem, index, array) { var spanObj = '' + arrayItem + '' var div = document.createElement('div'); div.innerHTML = spanObj; document.body.append(div); }
Mais je ne sais pas comment faire cette fonction pour les valeurs à l'intérieur d'une colonne du tableau (row.l_ext dans mon exemple).

Citation:

Envoyé par jreaux62

3- "...les fonctions de formatage..."
Quelles fonctions ? Pour formater quoi ?

Les fonction "data-formatter", comme dans cet exemple :

Code:

<th data-field="name" data-formatter="nameFormatter">Name</th>

Encore merci de te pencher sur mon problème !

Sylvain M.

Je pensais à quelque chose comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 // Fonction pour formater les valeurs de la colonne function BadgesFormatter(value, row, index) { return value.forEach(createSpan) } // Fonction pour créer les à chaque item de l'array function createSpan(arrayItem, index, array) { var spanObj = '' + arrayItem + '' return spanObj; }
Mais ça ne marche pas... J'ai ce message d'erreur :

Code:

TypeError: value.forEach is not a function[En savoir plus]

et si je tente avec "row.l_ext.forEach(createSpan)", ça ne marche pas non plus...

Code:

1 2 3 4 5 6 7 8 let liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"]; for (let item of liste) { let spanObj = document.createElement("span"); spanObj.className = "badge badge-info"; spanObj.append(item); document.body.append(spanObj); }
Voir createElement et append.

En un seul .append() sur le body pour être plus efficace :
Code:

1 2 3 4 5 6 7 8 9 10 let liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"]; let spanArray = []; for (let item of liste) { let spanObj = document.createElement("span"); spanObj.className = "badge badge-info"; spanObj.append(item); spanArray.push(spanObj); } document.body.append(...spanArray);
Voir spread.

Si la syntaxe ... (spread) n’est pas supportée, on peut le faire à l’ancienne mais c’est moins beau :

Code:

document.body.append.apply(document.body, spanArray);

Voir apply.

En version fonctionnelle :
Code:

1 2 3 4 5 6 7 8 let liste = ["KML", "SHP", "MDB", "TXT", "GEOJSON", "DBF"]; document.body.append(...liste.map((item) => { let spanObj = document.createElement("span"); spanObj.className = "badge badge-info"; spanObj.append(item); return spanObj; }));
Voir map.

Quant au Fiddle, il ne marche pas pour une simple raison :

Citation:

TypeError: $(...).bootstrapTable is not a function

Tu n’as pas inclus le plugin bootstrapTable. Tu l’aurais vu tout de suite si tu avais ouvert la console.

18/06/2018, 12h59
SylvainM

Merci Watilin :D

Je tiens à préciser, pour expliquer (non excuser) mon incompétence, que je ne suis pas du tout développeur, que je n'ai jamais eu un seul cours de développement, mais que mes "bidouilles" sur codes me sont très utiles :aie:
Merci donc pour votre indulgence ! ;)

Citation:

Envoyé par Watilin

Quant au Fiddle, il ne marche pas pour une simple raison : [...] Tu n’as pas inclus le plugin bootstrapTable. Tu l’aurais vu tout de suite si tu avais ouvert la console.

Bon, je ne comprends pas grand chose dans la console, mais SI, je l'avais ouvert !? Et je n'ai pas vu ce message d'erreur !?
Et j'ai bien fait la référence au plugin dans la partie "Ressources" du Fiddle ???

Du coup, je suis parti du Fiddle où les fonctions de formatage fonctionnent, et en ajoutant mon code, ça marche !
Voici le lien du Fiddle : http://jsfiddle.net/7hf6c8d2/9/

Tu verras que j'y ai intégré avec succès ta méthode que je suis en train d'essayer de comprendre.

Mais ce que je ne vois vraiment pas, c'est comment faire tourner cette fonction sur les items de la colonne de mon tableau (data-field="l_ext").

Pourriez-vous m'aider à y parvenir ?

Merci encore !!!
18/06/2018, 13h20
Invité

Citation:

"...J'aimerais mettre en forme cet array avec des pour chaque valeur..."

Le résultat doit se voir où ?
Dans la colonne "Liste extensions" ?
18/06/2018, 13h29
SylvainM

Citation:

Le résultat doit se voir où ?
Dans la colonne "Liste extensions" ?

Oui, c'est ça : dans la colonne Liste extension du tableau (désolé, je pensais que c'était évident : les tests en dessous du tableau, c'était pour trouver une méthode dans un contexte plus simple).
L'objectif est que ces soient créés pour chaque item de chaque ligne de la colonne.
Sâchant que le tableau est alimenté par un JSON (datajson)
18/06/2018, 13h37
SylvainM
En fait, le plugin "Bootstrap Table" accepte des fonctions de formatage des données sources (data-formatter="referencefonction").
J'en ai une simple pour la colonne "2017-2018" :
Code:

1 2 3 function BadgeFormatter(value, row, index) { return '' + value + ''; }
Mais du coup, ici "value" est un array, et je souhaiterais que cet array soit décomposé en 

J'espère que c'est plus clair maintenant ! :D

1- Je pense qu'il faut modifier l'array datajson après sa création :
Code:

1 2 3 4 5 6 7 8 9 10 11 datajson = [ ........................... ]; datajson.forEach(function(item, index) { var datajson_index = index; var l_ext_liste = item.l_ext; l_ext_liste.forEach(function(item, index) { var l_ext_index = index; var l_ext_value = item; datajson[datajson_index]['l_ext'][l_ext_index] = '' + l_ext_value + ""; }); });
Mais il y a certainement un moyen/script plus simple d'y parvenir.

[EDIT]

Citation:

Envoyé par SylvainM

...le plugin "Bootstrap Table" accepte des fonctions de formatage...

2- Alors tu peux tenter :

Code:

<th data-field="l_ext" data-formatter="ItemBadgeFormatter" data-sortable="true" data-align="center">Liste extensions</th>
Code:

1 2 3 function ItemBadgeFormatter(value, row, index) { return '' + value.join('') + ''; }

18/06/2018, 14h01
SylvainM

Super !!! :D
Ta deuxième solution fonctionne très bien dans mon cas :
http://jsfiddle.net/7hf6c8d2/19/

En bonus (mais ça me semble beaucoup plus compliqué), j'aimerais que la couleur de ces badge soit variable selon les formats (extensions).

Si jamais quelqu'un à une solution à me proposer, je serai très reconnaissant.

Mais là, c'est déjà SUPER !!! MERCI !!! :D

Code:

1
2
3
4
5
6
function ItemBadgeFormatter(value, row, index) {
  value.forEach(function(item, i) {
   value[i] = '<span class="badge badge-ext badge-' + item + '">' + item + '</span>';
  });
  return value.join(' ');
}

A toi ensuite de définir les classes CSS :

Code:

1
2
3
.badge-SHP { ... }
.badge-KML { ... }
.....

Super ! (bis !)

Ça marche super bien dans JSFiddle ! :D

Malheureusement :( , je viens de tenter sur mon serveur et mes données "réelles", et j'obtiens le message d'erreur :

Citation:

TypeError: value.forEach is not a function[En savoir plus]

Je pense comprendre d'où vient le problème.
Mon JSON source est généré en PHP depuis une base de données (PostGreSQL).
Et voici comment sont transcrites les valeurs de la colonne extensions :

Code:

"l_ext":"[\"PDF\",\"ZIP\"]"

Du coup, ce qui devrait être un array est une chaine...

Voici le code qui génère mon JSON :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php $conn = new PDO('pgsql:host=localhost;dbname=mydb','myuser','mypw'); $sql = "SELECT * FROM matable;"; $rs = $conn->query($sql); if (!$rs) { echo 'An SQL error occured.\n'; exit; }; $data = array(); while ($row = $rs->fetch(PDO::FETCH_ASSOC)) { $data[] = $row; } #header('Content-type: application/json'); echo json_encode($data); $conn = NULL; $rs=NULL; ?>
Et sur PostGreSQL, les fonctions qui retournent l'array sont celles-ci :

Code:

array_to_json(array_agg(monchamp)) as l_ext

Voyez-vous comment je peux faire en sorte que l'array issu de ma requête SQL reste un array en JSON ?

Bon, ce n'est certainement pas très propre, mais ça marche avec ces deux adaptations :

(1) une fonction pour remplacer les quote de chaque item :
Code:

1 2 3 4 5 String.prototype.replaceAll= function(old,rep){ var str = this; while(str.indexOf(old)>-1){str=str.replace(old,rep)} return str; }
(2) que j'utilise dans le "formateur" :
Code:

1 2 3 4 5 6 7 function ItemBadgeFormatter(value, row, index) { value = value.replaceAll('"','').replace('[','').replace(']','').split(','); value.forEach(function(item, i) { value[i] = '' + item + ''; }); return value.join(''); }
Si vous avez mieux, je prends, mais je marque le sujet comme résolu !

Encore merci à vous !

19/06/2018, 00h32
Watilin
Citation:

Envoyé par SylvainM

(1) une fonction pour remplacer les quote de chaque item :

C’est un peu une lacune de JS en effet, il n’y a pas de méthode de chaîne pour remplacer toutes les occurences à la fois. Souvent on utilise une regexp avec le flag g :

Code:

value.replace(/"/g, '')

Mais sur le principe, on ne devrait pas avoir à utiliser une regexp quand l’intuition nous dit qu’on n’a pas besoin d’une regexp.

Citation:

Envoyé par SylvainM

Super ! (bis !)

Ça marche super bien dans JSFiddle ! :D

Malheureusement :( , je viens de tenter sur mon serveur et mes données "réelles", et j'obtiens le message d'erreur :

Citation:

TypeError: value.forEach is not a function[En savoir plus]

[…]

Et voici comment sont transcrites les valeurs de la colonne extensions :

Code:

"l_ext":"[\"PDF\",\"ZIP\"]"

Du coup, ce qui devrait être un array est une chaine...

C’est dû au protocole HTTP : tout ce qui arrive par le réseau est sous forme de chaîne. Les frameworks comme jQuery offrent des facilités pour convertir automatiquement les données, mais quand on fait du JS vanilla (sans framework), il faut se souvenir qu’on ne reçoit que des chaînes.

Citation:

Envoyé par SylvainM

Si vous avez mieux, je prends, mais je marque le sujet comme résolu !

Il y a une méthode native pour convertir une chaîne en JSON : JSON.parse.
Code:

1 2 console.log( JSON.parse("[\"PDF\",\"ZIP\"]") ); // Array [ "PDF", "ZIP" ]
Je pense que tu trouveras ça plus pratique ;)
25/06/2018, 16h12
SylvainM

Citation:

Envoyé par Watilin

Il y a une méthode native pour convertir une chaîne en JSON : JSON.parse.
Je pense que tu trouveras ça plus pratique

Super !!! Testé et approuvé à l'instant 8-)

Tiens, un petite question hors sujet pendant que j'y suis : comment fait-on, sur le forum, pour baliser du code au sein d'une ligne, comme tu l'as fait pour

Code:

JSON.parse

. De mon côté, la balise CODE créé un nouveau bloc à chaque fois.
Et peux-tu me rappeler comment on indique le langage d'un bloc de code ?

Encore merci !
25/06/2018, 16h46
Invité

Bonjour,

1- [CODEinline].....[/CODEinline] ou [c].....[/c]

2- [CODE=php]......[/CODE]
25/06/2018, 16h55
SylvainM
Merci à toi pour ce super code.
Code:

1 2 3 <?php $conclusion = 'Merci !'; ?>