Récupérer un objet JSON dans un Javascript

Version imprimable

Bonjour à tout le monde,

Je veux construire des histogrammes sur une page web. Après mes recherches et lectures diverses, j'ai alors choisi l'API Chart.bundle.js. Les données de l'exemple trouvé fonctionnent bien. Je voulais construire un histogramme dont les données viennent d'une base des données.
Pour réaliser cela, je récupère les données par une servlet que j'envoie vers ma page JSP dans un SCRIPT JS. J'ai presque utiliser toutes mes idées en vain.
Je récupère une liste de la base des données. C'est une liste d'objets avec deux attributs (l'un est une String et l'autre un Integer). Je convertis ma liste d'objet en JSON dans la servlet et je le récupère dans le SCRIPT comme variable Javascript. Pour l'instant ça n'a pas réussi.

Je demande alors aide auprès de la communauté. Voici les codes de ma Servlet de mon SCRIPT JS.

Code de la servlet :

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
25
26
27
28
29
30
31
32
33
 
		// création d'objet JSON
                JSONObject dataObject1 = null; 
		JSONObject dataObject2 = null;
// création de String pour récupérer les objets JSON
		String dataJSON1 = null;
		String dataJSON2 = null;
 
// listes pour stocker mes données venues de la BD
		 List<String> etiquetes = new ArrayList<String>();
 		List<Integer> donnees = new ArrayList<Integer>();
// récupération des données de la BD
		 List<Nonshi<String, String, Integer>> lnbplotis = new ArrayList<Nonshi<String, String, Integer>>();
		StatistiquesParcelle statp = new StatistiquesParcelle();
		lnbplotis = statp.nbreparcellesparlotissement();
// stockage des données dans les listes crées ci-dessus
		 int i = 0;
		while (i < lnbplotis.size()) {
			etiquetes.add(lnbplotis.get(i).getAttribut2());
			donnees.add(lnbplotis.get(i).getAttribut3());
			i++;
		}
// Convertion des listes en Objet JSON
		dataObject1 = new JSONObject(etiquetes);
		dataObject2 = new JSONObject(donnees);
// transformation des objets JSON en String		dataJSON1 = dataObject1.toString();
		 dataJSON2 = dataObject2.toString();
// envoie des données vars la JSP
		 request.setAttribute("dataJSON1", dataJSON1);
		request.setAttribute("dataJSON2", dataJSON2);
 
		this.getServletContext().getRequestDispatcher(VUE).forward(request, response);
	}

SCRIPT Javascript:

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
25
26
27
28
29
30
31
32
33
34
35
36
 
<script>
		var donnee=JSON.parse(dataJSON2); // convertion des données reçues par JSON 
 			//document.getElementById("donnee");
		 alert(donnee); // cette ligne affiche : {''empty":false}
		var etiquete=JSON.parse(dataJSON1);
			//document.getElementById("etiquete");
    	var myContext = document.getElementById("myChart");
   		 var myChartConfig = {
      		type: 'bar',
      		data: {
        		labels:etiquete,
        			//["Féminin", "Masculin", "Animaux"],
        		datasets: [
           			{
           				label: "Nombre de Parcelles",
           				data:donnee,
           					//[227, 331, 11],
		   				backgroundColor: ['green','yellow','red'],
           			},
 
           			//{
           			//label: "1ère Classe",
           		//	data: [107, 115, 2],
		   		//	backgroundColor: ['red','red','red'],
          		// },{
           		//	label: "2ème Classe",
           		//		data: [120, 116, 9],
		   		//		backgroundColor: ['blue','blue','blue'],
           			//}
        		]
      		}
    	}
  		var myChart = new Chart(myContext, myChartConfig);
 
	</script>

02/08/2019, 18h51
NoSmoking

Bonjour,
on ne sais même pas comment tes données, générées côté serveur, arrivent dans ton script qui sera pris en compte côté client !

Es-tu sûr que ton code serveur retourne bien les bonnes données ?

Il existe un forum Java.

Effectivement, vous avez raison, avec les multitudes variantes que j'ai fait, je me suis trompé de code.

Voici, le code que je voulais envoyer :

Contenu de la Servlet: qui interroge la BD avec la méthode nbreparcellesparlotissement() de l'objet StatistiquesParcelle et qui donne une liste du type List<Nonshi<String, String, Integer>>.

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
25
26
27
28
29
30
31
32
 
//Initialisation d'un objet Gson
final GsonBuilder builder = new GsonBuilder();
final Gson gson = builder.create();
 
//Initialisation des listes qui vont stocker les données reçues de la BD et qui seront converties en Gson
List<String> etiquetes = new ArrayList<String>();
List<Integer> donnees = new ArrayList<Integer>();
 
List<Nonshi<String, String, Integer>> lnbplotis = new ArrayList<Nonshi<String, String, Integer>>();
StatistiquesParcelle statp = new StatistiquesParcelle();
lnbplotis = statp.nbreparcellesparlotissement(); // récupération des données de la BD par l'appel de la méthode nbreparcellesparlotissement()
 
int i = 0;
while (i < lnbplotis.size()) { 
// cette boucle permet de récupérer des données de la liste obtenue après l'appel de la méthode nbreparcellesparlotissement()
// je stocke ici les contenus de chaque attribut dans une liste appropriée
	etiquetes.add(lnbplotis.get(i).getAttribut2());
	donnees.add(lnbplotis.get(i).getAttribut3());
	i++;
}
 
// je place les données dans l'entête request pour les envoyer vers la JSP
request.setAttribute("etiquete", gson.toJson(etiquetes)); 
request.setAttribute("donnee", gson.toJson(donnees)); 
 
// juste pour vérifier ici les données sont correctement récupérées de la BD
System.out.println(gson.toJson(etiquetes));
System.out.println(gson.toJson(donnees));
 
// appel de la JSP
this.getServletContext().getRequestDispatcher(VUE).forward(request, response);

Code de la JSP avec le script javascript

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
25
26
27
28
29
30
31
32
33
 
<div style="width:80%">
	<canvas id="myChart" ></canvas>
</div>
<script>
	var valeurs=${donnee};
	alert(valeurs); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
	var mydata="["+valeurs+"]"; // ajout des crochets pour respecter le format des données du Chart.
 
	var etiquetes=${etiquete};
	alert(etiquetes); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
	var mylabels="["+etiquetes+"]"; // ajout des crochets pour respecter le format des données du Chart.
 
    	var myContext = document.getElementById("myChart");
   	var myChartConfig = {
      		type: 'bar',
      		data: {
        		labels:mylabels, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des abscisses
        			//["Féminin", "Masculin", "Animaux"], // ici un exemple de présentation des données selon le format de l'API Chart.bundle.js
        		datasets: [
           			{
           				label: "Nombre de Parcelles",
           				data:mydata, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des ordonnées
           					//[227, 331, 11],
		   				backgroundColor: ['green','yellow','red'],
           			},
 
            		]
      		}
    	}
  	var myChart = new Chart(myContext, myChartConfig);
 
</script>

Excusez-moi de vous avoir infortuné avec mon problème.

03/08/2019, 14h32
Toufik83

Avec ce code

Code:

var mydata="["+valeurs+"]";

tu n'obtiens pas un tableau mais plutôt une chaîne de caractère.

essaies plutôt

Code:

var mydata=[valeurs];

la même chose pour la variable mylabels
05/08/2019, 00h11
demcoul

1 pièce(s) jointe(s)

Bonjour,

J'ai testé votre proposition, malheureusement pas de satisfaction. En effet, quand l'affiche avec un System.out.println(donne) dans la servlet, j'obtiens dans ma console ça :
Pièce jointe 495479

J'ai juste besoin de placer des listes de ce genre devant les attributs labels et data dans le fichier JSP au niveau du script js.

Merci.
06/08/2019, 19h04
NoSmoking

Regarde le code HTML généré, CTRL +U, et fait les corrections en conséquence.

Voici le code HTML généré.
Je constate que les valeurs des données et des étiquettes ne sont pas placées devant les propriétés labels et data .

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
25
26
27
28
29
30
31
<div style="width: 80%">
				<canvas id="myChart"></canvas>
			</div>
 
			<script>
                                var valeurs = ["DIALACOROBOUGOU","KATI-SAMAKEBOUGOU"];
                                alert(valeurs); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
                                var mydata = "[" + valeurs + "]"; // ajout des crochets pour respecter le format des données du Chart.
 
                                var etiquetes = [22,16];
                                alert(etiquetes); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
                                var mylabels = "[" + etiquetes + "]"; // ajout des crochets pour respecter le format des données du Chart.
 
                                var myContext = document.getElementById("myChart");
                                var myChartConfig = {
                                        type : 'bar',
                                        data : {
                                                labels : etiquetes, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des abscisses
                                                //["Féminin", "Masculin", "Animaux"], // ici un exemple de présentation des données selon le format de l'API Chart.bundle.js
                                                datasets : [ {
                                                        label : "Nombre de Parcelles",
                                                        data : valeurs, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des ordonnées
                                                        //[227, 331, 11],
                                                        backgroundColor : [ 'green', 'yellow', 'red' ],
                                                },
 
                                                ]
                                        }
                                }
                                var myChart = new Chart(myContext, myChartConfig);
                        </script>

Voir les lignes 18 et 22 concernées.

Merci pour vos conseils,
J'ai réussi à obtenir un graphe en secteurs (type pie) sans problème, avec l'histogramme, l'axe des ordonnées commence par la plus petite valeur et non zéro(0).

L'erreur était au niveau des valeurs, car j'avais inversé les valeurs des deux axes (axe-X était à axe-Y et vice-versa).

Encore merci beaucoup.

Voici le code correcte de la JSP.

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
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="dist/Chart.bundle.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</head>
<body>
        <div style="width: 80%">
	     <canvas id="myChart"></canvas>
	</div>
       <script type="text/javascript">
                var myContext = document.getElementById("myChart");
                var myChartConfig = {
                        type : 'pie',
                        data : {
                                labels : ${donnee}, // axe des ordonnées 
                                datasets : [ {
                                                label : "Nombre de Parcelles",
                                                data : ${etiquete}, // axe des abscisses
                                                backgroundColor : [ 'green', 'yellow'],
                                },]
                        }
                }
                var myChart = new Chart(myContext, myChartConfig);
        </script>
</body>
</html>