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

**SylvainM** · 15/06/2018, 13h31

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.

Invité · 15/06/2018, 14h55

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 ?

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 ?

**SylvainM** · 15/06/2018, 15h16

Merci jreaux62 de te pencher sur mon problème !

Envoyé par jreaux62

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

Ok, je le mets ci-dessous !

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 = '<span class="badge badge-info">' + arrayItem + '</span>'
    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).

Envoyé par jreaux62

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Encore merci de te pencher sur mon problème !

Sylvain M.

**SylvainM** · 15/06/2018, 15h28

Je pensais à quelque chose comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 <span> à chaque item de l'array
function createSpan(arrayItem, index, array) {
    var spanObj = '<span class="badge badge-info">' + arrayItem + '</span>'
    return spanObj;
}

Mais ça ne marche pas... J'ai ce message d'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Watilin** · 15/06/2018, 17h29

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Voir apply.

En version fonctionnelle :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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.

**SylvainM** · 18/06/2018, 12h59

Merci Watilin

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

Merci donc pour votre indulgence !

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 !!!

Invité · 18/06/2018, 13h20

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

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

**SylvainM** · 18/06/2018, 13h29

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)

**SylvainM** · 18/06/2018, 13h37

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function BadgeFormatter(value, row, index) {
		return '<span class="badge badge-info">' + value + '</span>';
}

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 !

Invité · 18/06/2018, 13h43

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

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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] = '<span class="badge">' + l_ext_value + "</span>";
  });
});

Mais il y a certainement un moyen/script plus simple d'y parvenir.

[EDIT]

Envoyé par SylvainM

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

2- Alors tu peux tenter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function ItemBadgeFormatter(value, row, index) {
  return '<span class="badge badge-ext">' + value.join('</span><span class="badge badge-ext">') + '</span>';
}

**SylvainM** · 18/06/2018, 14h01

Super !!!

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 !!!

Invité · 18/06/2018, 14h12

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 css :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SylvainM** · 18/06/2018, 15h10

Super ! (bis !)

Ça marche super bien dans JSFiddle !

Malheureusement

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

"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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**SylvainM** · 18/06/2018, 16h52

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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] = '<span class="badge badge-' + item + '">' + item + '</span>';
  });
  return value.join('');
}

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

Encore merci à vous !

**Watilin** · 19/06/2018, 00h32

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Envoyé par SylvainM

Super ! (bis !)

Ça marche super bien dans JSFiddle !

Malheureusement

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

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

[…]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
console.log( JSON.parse("[\"PDF\",\"ZIP\"]") );
// Array [ "PDF", "ZIP" ]

Je pense que tu trouveras ça plus pratique

**SylvainM** · 25/06/2018, 16h12

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

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !