[Bootstrap Table] Récupération et traitement de données

Version imprimable

Bonjour à tous,

Je tente de mettre en place un tableau partagé, créé à partir d'une base PostGreSQL, chargée en PHP, et mise en forme avec Bootstrap + Bootstrap Table.
Voici l'ébauche du projet :
url supprimée

Je rencontre un problème au chargement de la page, problème qui rend inopérationnel le moteur de recherche en haut à droite du tableau (alors qu'il fonctionne par exemple avec le tableau de l'onglet "Acquisitions").

La console me dit ceci :

Code:

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data[En savoir plus] referentiel.php:590:16

Et la fonction qui génère cette erreur est celle-ci :
Code:

1 2 3 4 5 6 7 function ThemeFormatter(value, row, index) { row.tags = JSON.parse(row.tags); row.tags.forEach(function(item, i) { row.tags[i] = '<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-tag"></span> ' + item + '</button>'; }); return '<button type="button" class="btn btn-success btn-md"><span class="glyphicon glyphicon-asterisk"></span> ' + value + '</button><br><br>' + row.tags.join(''); }
Donc, je vois que mes données problématiques sont celles du champs tags de ma table PostGreSQL.
Ce champ est de type text[] est voici par exemple le contenu de la 1ère valeur :
{écoles,lycées,"établissements scolaires","éducation nationale"}(j'avais mis des quotes " " pour chaque item, mais PostGre les supprime quand j'édite la table)

Auriez-vous une piste qui me permettrait d'identifier plus précisément ce qui pose problème ?

Si besoin, je peux exporter l'ensemble du contenu de la colonne tags... mais est-ce que le problème vient vraiment de là ?

Merci pour votre aide !

En poursuivant mes investigations, je me rends compte que la fonction ThemeFormatter n'est pas la seule à poser problème.
La fonction DescriptionFormatter est aussi en cause.
Du coup, je pense que le problème vient plus des fonctions que des données !

Ça parait logique : j'ai écris ces fonctions JS sans maitriser vraiment JS... :aie:

Du coup, c'est là qu'il doit être possible de corriger mon erreur.

Voici le contenu de la deuxième fonction :
Code:

1 2 3 4 5 6 7 8 9 10 function DescriptionFormatter(value, row, index) { row.formats = JSON.parse(row.formats); row.formats.forEach(function(item, i) { row.formats[i] = '<span class="badge badge-extension format-' + item + '">' + item + '</span>'; }); return row.description + '<br>' + row.formats.join('') + '<br>' + '<a href="file:///' + row.chemin + '" class="btn btn-info btn-xs" role="button" data-toggle="tooltip" data-placement="top" title="Dossier"><span class="glyphicon glyphicon-folder-open"></span>  ' + row.chemin + '</a><br>' + '<a href="file:///' + row.links + '" class="btn btn-info btn-xs" role="button" data-toggle="tooltip" data-placement="top" title="Dossier"><span class="glyphicon glyphicon-folder-open"></span>  ' + row.links + '</a><br>' + '<a href="' + row.liens_metadata + '" class="btn btn-default btn-xs" role="button" data-toggle="tooltip" data-placement="top" title="Métadonnées"><span class="glyphicon glyphicon-list-alt"></span> Métadonnées</a>'; }
Le principe de ces fonctions est de formater en HTML le contenu du JSON généré depuis la base de données via PHP.

Identifieriez vous mon (mes) erreur(s) ?

20/11/2018, 16h49
psychadelic

ton serveur PostGreSQL ne renvoit pas les données au format JSON, et même avec des doubles quotes ce ne sera toujours pas un format JSON

à minima il faut : ["écoles","lycées","établissements scolaires","éducation nationale"]sinon tu peux utiliser un simple split, mais faudrait mieux maîtriser le paramétrage de ton serveur sur se formatage des données transmises.

Merci psychadelic de te pencher sur ma question, :D

Je ne suis pas sûr de bien comprendre ta réponse, mais pour éclaircir le fonctionnement, voici la fonction PHP qui génère le fichier "JSON" :
(ce n'est pas moi qui en suis à l'origine, mais je ne sais plus où je l'avais récupéré :oops: )

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php
# Connect to PostgreSQL database
$conn = new PDO('pgsql:host=localhost;dbname=xxx_dbname_xxxx','xxx_user_xxx','xxx_mdp_xxx');
# Build SQL SELECT statement and return the geometry as a GeoJSON element
$sql = "SELECT theme, titre, producteur, source, date_maj, date_recup, description, 
       formats, liens_metadata, chemin, flux, links, id_cat, array_to_json(tags) as tags
       FROM sig.catalogue
       ORDER BY theme;";
# Try query or error
$rs = $conn->query($sql);
if (!$rs) {
    echo 'An SQL error occured.\n';
    exit;
};
#loop through the returned data
$data = array();
while ($row = $rs->fetch(PDO::FETCH_ASSOC)) {
	$data[] = $row;
}
#header('Content-type: application/json');
echo json_encode($data);
$conn = NULL;
$rs=NULL;
?>

Est-ce que ça permet d'y voir plus clair ?

20/11/2018, 16h59
SylvainM

Et j'ai oublié de mettre le lien vers le contenu du "JSON" (ou "pseudo-JSON") généré :
url supprimée

Pour comparaison, ce "JSON" créé de manière similaire en PHP ne génère pas d'erreur :
url supprimée
20/11/2018, 17h13
psychadelic

a priori ton premier fichier est bien au format json.

mais quel est l’intérêt de parser pour transformer en json des données qui sont déjà en json ?

Citation:

mais quel est l’intérêt de parser pour transformer en json des données qui sont déjà en json ?

Et bien, je me suis inspiré de différentes fonctions de formatage disponibles sur les tutos de Bootstrap Table. Mais sans trop les comprendre, je l'avoue... :oops::aie:
Je viens de retirer la ligne row.tags = JSON.parse(row.tags); de la fonction ThemeFormatter ci-dessous, mais j'obtiens alors ce message d'erreur :

Code:

TypeError: row.tags.forEach is not a function

Fonction d'origine (à laquelle je viens de supprimer JSON.parse()) :
Code:

1 2 3 4 5 6 7 function ThemeFormatter(value, row, index) { row.tags = JSON.parse(row.tags); row.tags.forEach(function(item, i) { row.tags[i] = '<button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-tag"></span> ' + item + '</button>'; }); return '<button type="button" class="btn btn-success btn-md"><span class="glyphicon glyphicon-asterisk"></span> ' + value + '</button><br><br>' + row.tags.join(''); }

c'est parce que tu respecte pas la structure de tes données ni vraiment compris la méthode forEach...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function ThemeFormatter(value, row, index) { var truc=''; row.forEach(function(elm, no) { for (tag of JSON.parse(elm.tags)) { truc = '<button type="button" class="btn btn-default btn-xs">'; truc += '<span class="glyphicon glyphicon-tag"></span>'; truc += ' ' + tag + '</button>'; } } //...
tu me sembles négliger le problème de portée de ta variable row : c'est un objet, donc l'interpréteur utilise un pointeur
=> tu n'a pas le droit d'utiliser le même variable row.tags ou row.tags[i] simultanément en lecture et en écriture
de toutes facçon, la suite de cette fonction est visiblement aussi erronée

[ edit ] il y avait un piège : elm.tags est du type string..

Merci psychadelic d'essayer de me faire comprendre, et la tâche est manifestement compliquée :aie:

J'essaye d'adapter ta proposition dans ma page, mais j'ai toujours une erreur TypeError: row.forEach is not a function.

Il manquait une fermeture de parenthèse dans ton code, et je l'ai placée vers la fin, mais sans être sûr de moi...

Et tu n'avais pas mis de return à la fin de la fonction, alors j'en ai ajouté un :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function ThemeFormatter(value, row, index) { var truc=''; row.forEach(function(elm, no) { for (tag of JSON.parse(elm.tags)) { truc = '<button type="button" class="btn btn-default btn-xs">'; truc += '<span class="glyphicon glyphicon-tag"></span>'; truc += ' ' + tag + '</button>'; } }); return truc; }
Mais ce que je ne comprends pas (entre autres), c'est où sont définis elm et no ?

Par ailleurs, la difficulté vient peut-être du fait que, dans la colonne "Thème", je souhaite afficher les valeurs de plusieurs champs : theme et tag.

Code:

<th data-field="theme" data-formatter="ThemeFormatter" data-sortable="true">Thème</th>

value correspond donc à la valeur du champ theme, et si j'ai bien compris, les autres champs sont appelés via row.nom_du_champ (row.tag ici).

(je parle de "champs" car je suis plus habitué à travailler avec des bases de données, mais j'ai bien compris qu'en JSON, ce n'est pas le bon terme et je me mélange un peu les pinceaux dans les objets JSON, clés, valeurs)

21/11/2018, 15h06
psychadelic
Citation:

Envoyé par SylvainM

Mais ce que je ne comprends pas (entre autres), c'est où sont définis elm et no ?

Je ne sais pas de quelle planète tu viens , mais sans doute d’une galaxie très différente de celle de JavaScript ou même de la programation en général…

en syntaxe JavaScript on défini ainsi une function*: ( en fait c’est juste l’une des syntaxes possibles, mais c’est celle que tu utilises ici)

function MaFonction (param1, param2, param3) { ….

MaFonction = c’est le nom que tu lui donne librement, (à condition de respecter certaines règles d’écriture)

param1, param2, param3,… = ce sont les noms pour chaque argument d’appel de ta fonction, eux aussi à choisir librement.

Exemple :
Code:

1 2 3 fonction MonAddition(val_A, val_B) { return (val_A + val_B); }
utilisation :
Code:

1 2 3 4 5 var vTotal = MonAddition (15, 30); // ou var val_X = 6, val_Y= 7, vTot = MonAddition (val_X, val_X); // ou var pomme = 45, bananes= 250, NbFruits = MonAddition (pomme, bananes);
tu remarquera que les noms de variables en entrée de la fonction sont différents des noms des variables en argument.

Pour la suite, je te conseille de potasser un peu plus de cours sur JavaScript ;)
21/11/2018, 17h06
SylvainM

Avant de lire la totalité de ta réponse et de la laisser infuser dans mon esprit (ce qui va prendre des heures), je réponds déjà à ta première remarque :

Citation:

Je ne sais pas de quelle planète tu viens , mais sans doute d’une galaxie très différente de celle de JavaScript ou même de la programation en général…

Je viens effectivement d'une planète très éloignée de cette galaxie de la programmation. Ma planète d'origine, c'est les petites fleurs, les animaux et les insectes en tous genres : la taxonomie et l'écologie ! :mrgreen:
Donc, merci pour ton indulgence ! :D

Maintenant, lecture !!! :aie:

Bonjour,
si l'on reprend la définition de la fonction liée à data-formatter
Code:

1 2 3 4 5 6 7 8 function fctFormatter(value, row, index, field) { var result = ""; // valus = la valeur de la propriété définie dans data-field // row = l'objet correspondant contenant les données // index = le numéro de la ligne traitée, commençant à 0 // field = le nom du champ traité return result; // chaine au format HTML à mettre dans la cellule }
pour bien t'en rendre compte place un console.log( arguments) dans ta fonction.

Comme la propriété tags de ton objet est une string il te faut effectivement la « parser », c'est le boulot de JSON.parse(), pour l'utiliser comme un array en utilisant la méthode forEach ou une simple boucle for.

Par exemple :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function fctFormatter(value, row, index, field) { // index et field ne sont pas forcément utiles var strHML = ""; var lesTags = JSON.parse(row.tags); strHML += "<h1>" + value + "</h1>"; strHML += "<ul>"; lesTags.forEach(function(leTag) { // leTag est passé à la fonction callBack et représente l’élément traité, voir le lien fourni strHML += "<li>" + leTag + "</li>"; }); strHML += "</ul>"; return strHML; }

Yeah !!!! :D 8-)

Merci une nouvelle fois, NoSmoking !!!
Du coup, j'ai bien compris mon erreur, qui se situait ici : je faisais row.tags = JSON.parse(row.tags); alors qu'il suffisait de donner un autre nom à ma variable, comme tu le propose avec var lesTags = JSON.parse(row.tags);Du coup, voici mes fonctions qui marchent.

Celle pour la colonne "Theme" :

Code:

1
2
3
4
5
6
7
8
9
function ThemeFormatter(value, row, index, field) {
  var strHML = "";
  var lesTags = JSON.parse(row.tags);
  strHML += "<button type='button' class='btn btn-success btn-md'><span class='glyphicon glyphicon-asterisk'></span>&nbsp;" + value + "</button><br><br>";
  lesTags.forEach(function(leTag) {
    strHML += "<button type='button' class='btn btn-default btn-xs'><span class='glyphicon glyphicon-tag'></span>&nbsp;" + leTag + "</button>";
  });
  return strHML;
}

Et celle pour la colonne "Description" :

Code:

1
2
3
4
5
6
7
8
9
10
function DescriptionFormatter(value, row, index) {
    LesFormats = JSON.parse(row.formats);
    LesFormats.forEach(function(item, i) {
        LesFormats[i] = '<span class="badge badge-extension format-' + item + '">' + item + '</span>';
        });
		return row.description + '<br>' + LesFormats.join('') + '<br>'
		+ '<a href="file:///' + row.chemin + '" class="btn btn-info btn-xs" role="button" data-toggle="tooltip" data-placement="top" title="Dossier"><span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;' + row.chemin + '</a><br>'
		+ '<a href="file:///' + row.links + '" class="btn btn-info btn-xs" role="button" data-toggle="tooltip" data-placement="top" title="Dossier"><span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;' + row.links + '</a><br>'
		+ '<a href="' + row.liens_metadata + '" class="btn btn-default btn-xs" role="button" data-toggle="tooltip" data-placement="top" title="Métadonnées"><span class="glyphicon glyphicon-list-alt"></span>&nbsp;Métadonnées</a>';
}

Bon, j'ai encore plein de choses à régler pour que la page soit utilisable, mais grace à vous, ça avance !!!

MERCI !!!

Citation:

Du coup, j'ai bien compris mon erreur, qui se situait ici : je faisais row.tags = JSON.parse(row.tags); alors qu'il suffisait de donner un autre nom à ma variable, comme tu le propose avec var lesTags = JSON.parse(row.tags);

Ton erreur ne ce situait pas à ce niveau, même si cela n'est pas recommandé de modifier la structure d'un objet, on ne sait jamais cela peut avoir une influence sur le reste du code, c'est plutôt dans l'utilisation/affectation de row.tags[i] dans ta boucle qui pêchait.
« »
En reprenant mon exemple tu aurais tout à fait pu faire
Code:

1 2 3 4 5 6 7 8 9 10 11 12 function fctFormatter(value, row, index, field) { // index et field ne sont pas forcément utiles var strHML = ""; row.tags = JSON.parse(row.tags); // ICI l'objet « row » passé en paramètre est modifié strHML += "<h1>" + value + "</h1>"; strHML += "<ul>"; row.tags.forEach(function(leTag) { // leTag est passé à la fonction callBack et représente l’élément traité, voir le lien fourni strHML += "<li>" + leTag + "</li>"; }); strHML += "</ul>"; return strHML; }

22/11/2018, 19h18
SylvainM

Citation:

c'est plutôt dans l'utilisation/affectation de row.tags[i]

Maintenant que tu me le dis, effectivement je me souviens que j'avais écris ça de manière très peu sûr de moi !
(en fait, j'avais fait cette fonction il y a plusieurs mois, et j'avais laissé de côté ce projet)

Merci pour la précision qui me permet de cerner d'autant mieux mon erreur ! :D