Discussion :

[SylvainM]

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 :

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

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

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

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>&nbsp;' + item + '</button>';
        });
		return '<button type="button" class="btn btn-success btn-md"><span class="glyphicon glyphicon-asterisk"></span>&nbsp;' + 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 !

[SylvainM]

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

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

Voici le contenu de la deuxième fonction :

Code JS :

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

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>&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>';
}

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

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

[SylvainM]

Merci psychadelic de te pencher sur ma question,

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

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

[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

[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 ?

[SylvainM]

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

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

TypeError: row.tags.forEach is not a function

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

Code JS :

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

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>&nbsp;' + item + '</button>';
        });
		return '<button type="button" class="btn btn-success btn-md"><span class="glyphicon glyphicon-asterisk"></span>&nbsp;' + value + '</button><br><br>' + row.tags.join('');
}

[psychadelic]

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

Code JavaScript :

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

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 += '&nbsp;' + 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..

[SylvainM]

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

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

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

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 += '&nbsp;' + 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 HTML :

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

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

[psychadelic]

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 :

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

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

utilisation :

Code :

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

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

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

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 !
Donc, merci pour ton indulgence !

Maintenant, lecture !!!

[NoSmoking]

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

Code :

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

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 :

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

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;
}

[SylvainM]

Yeah !!!!

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

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

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

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

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

[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);

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 :

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

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;
}

[SylvainM]

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 !