Remplir un dojox.DataGrid à partir de données JSON

Version imprimable

Bonjour,

Je suis en train de réaliser un petit test d'importation XML vers un Datagrid, via un xhrGet.

Voici le code XML source :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<?xml version="1.0" encoding="UTF-8" ?>
<vehicules>
	<vehicule>
		<numero>006680</numero>
		<marque>Renault</marque>
		<modele>Laguna</modele>
		<immatriculation>1231 FF 69</immatriculation>
		<date_immat></date_immat>
	</vehicule>
	<vehicule>
		<numero>000066</numero>
		<marque>Daewoo</marque>
		<modele>Lanos SE GPL</modele>
		<immatriculation>9999 ZZ 99</immatriculation>
		<date_immat>1999-11-01</date_immat>
	</vehicule>
	<vehicule>
		<numero>000180</numero>
		<marque>Daewoo</marque>
		<modele>Lanos SE GPL</modele>
		<immatriculation>7777 XX 99</immatriculation>
		<date_immat>1999-10-01</date_immat>
	</vehicule>
	<vehicule>
		<numero>001250</numero>
		<marque>Renault</marque>
		<modele>Clio</modele>
		<immatriculation>8897 BG 62</immatriculation>
		<date_immat>2006-11-01</date_immat>
	</vehicule>
	<vehicule>
		<numero>000280</numero>
		<marque>Daewoo</marque>
		<modele>Lanos SE GPL</modele>
		<immatriculation>8888 XX 99</immatriculation>
		<date_immat>2000-10-01</date_immat>
	</vehicule>
	<vehicule>
		<numero>0045877</numero>
		<marque>Renault</marque>
		<modele>Twingo</modele>
		<immatriculation>9780 HH 66</immatriculation>
		<date_immat>2005-11-01</date_immat>
	</vehicule>
	<vehicule>
		<numero>0410208</numero>
		<marque>Renault</marque>
		<modele>Megane</modele>
		<immatriculation>9978 PP 59</immatriculation>
		<date_immat>2005-11-01</date_immat>
	</vehicule>
</vehicules>

Code PHP qui récupère le XML :

Code:

1
2
3
header ("content-type: application/json");
$xml = SimpleXML_load_file("../vehicules.xml");
echo json_encode($xml);

Structure Json :

Code:

{"vehicule":[{"numero":"006680","marque":"Renault","modele":"Laguna","immatriculation":"1231 FF 69","date_immat":{}},{"numero":"000066","marque":"Daewoo","modele":"Lanos SE GPL","immatriculation":"9999 ZZ 99","date_immat":"1999-11-01"},{"numero":"000180","marque":"Daewoo","modele":"Lanos SE GPL","immatriculation":"7777 XX 99","date_immat":"1999-10-01"},{"numero":"001250","marque":"Renault","modele":"Clio","immatriculation":"8897 BG 62","date_immat":"2006-11-01"},{"numero":"000280","marque":"Daewoo","modele":"Lanos SE GPL","immatriculation":"8888 XX 99","date_immat":"2000-10-01"},{"numero":"0045877","marque":"Renault","modele":"Twingo","immatriculation":"9780 HH 66","date_immat":"2005-11-01"},{"numero":"0410208","marque":"Renault","modele":"Megane","immatriculation":"9978 PP 59","date_immat":"2005-11-01"}]}

Dojo (CDN):

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
<head>
	<title>Dojo</title>
	<link type="text/css" rel="stylesheet" href="claro.css"/>	
	<style type="text/css">
		@import "Grid.css";
		@import "nihiloGrid.css";
 
		.dojoxGrid table {
		  margin: 0;
		}
	</style>
 
	<script>dojoConfig = {parseOnLoad: true}</script>
	<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"></script>
	<script>
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojo.data.ItemFileReadStore");
 
		dojo.ready(function(){
 
			var targetNode = dojo.byId("grid.debug");
 
			var xhrArgs = {
				url: "../json/index.php",
				handleAs: "json",
				load: function(data, ioArgs){
 
			    	//var newData = {
				//		identifier: 'vehicules',
				//		label: 'vehicules',
				//		items: data
				//	};
 
			    	var dataStore = new dojo.data.ItemFileReadStore({data: data});
					var gridStructure = [
	                   [
	                     { field: "numero", 	 	 name: "Numéro", 			width: 5,  },
	                     { field: "marque", 	 	 name: "Marque", 			width: 5,  },
	                     { field: "modele",  		 name: "Modèle", 			width: 10, },
	                     { field: "immatriculation", name: "Immatriculation", 	width: 15, },
	                     { field: "date_immat", 	 name: "Date immat", 		width: 10, }
	                   ]
	                 ];
 
					console.log(data);
					console.log(dataStore);			                 
 
					var grid = new dojox.grid.DataGrid({
						id: "grid",
						jsid: "grid",
						store: dataStore,
						structure: gridStructure,
						style: 'width:761px;height:300px;'
					}, dojo.byId("grid.DataGrid"));
 
					grid.startup(); 
			    },
			    error: function(error){
			        targetNode.innerHTML = "An unexpected error occurred: " + error;
			    }
			};
 
			var deferred = dojo.xhrGet(xhrArgs);
		});
	</script>
</head>
<body class='claro'>
 
<h1>Dojo</h1>
 
<div id="grid.DataGrid"></div>
 
<div id="grid.debug"></div>
 
</body>
</html>

Donc coté PHP, j'ai rajouté le content-type (au cas où), ma structure Json semble correcte. L'entête de mon Grid apparait mais à la place des données, j'ai "Une erreur est survenue"... J'ai controlé dans la console de firebug ma structure Json et mon store. Mais je n'arrive pas à savoir ce qui me cause cette erreur. :/

Merci d'avance.

22/11/2012, 12h36
kcin

Dans ma structure XML, je remarque, que pour la première données date_immat, j'ai un vide, qui est traduit en JSON par "date_immat":{}.

Est ce que c'est normal ? Ca ne devrait pas faire "date_immat":"" ou "date_immat":null à la place ?

Oublions mon dernier post, j'ai trouvé la solution, mais c'était avec un test en dur... Donc non valide :/

Comme dit plus tôt, quand je fais un json_encode, çà me retourne ceci :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 { "vehicule": [ {"numero":"006680","marque":"Renault","modele":"Laguna","immatriculation":"1231 FF 69","date_immat":null}, {"numero":"000066","marque":"Daewoo","modele":"Lanos SE GPL","immatriculation":"9999 ZZ 99","date_immat":"1999-11-01"}, {"numero":"000180","marque":"Daewoo","modele":"Lanos SE GPL","immatriculation":"7777 XX 99","date_immat":"1999-10-01"}, {"numero":"001250","marque":"Renault","modele":"Clio","immatriculation":"8897 BG 62","date_immat":"2006-11-01"}, {"numero":"000280","marque":"Daewoo","modele":"Lanos SE GPL","immatriculation":"8888 XX 99","date_immat":"2000-10-01"}, {"numero":"0045877","marque":"Renault","modele":"Twingo","immatriculation":"9780 HH 66","date_immat":"2005-11-01"}, {"numero":"0410208","marque":"Renault","modele":"Megane","immatriculation":"9978 PP 59","date_immat":"2005-11-01"} ] }
Le hic, c'est que la première chaîne de caractères est en trop ("vehicule": ainsi que les { } en début et fin)... Comment faire pour les retirer ? Ou les faire prendre en compte par la partie javascript ?

J'ai finalement résolu mon casse-tête.

Le fichier qui récupère la source JSON doit être ainsi :

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
37
38
39
40
41
42
43
44
<script>dojoConfig = {parseOnLoad: true}</script>
	<script src="//ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"></script>
	<script>
		dojo.require("dojox.grid.DataGrid");
		dojo.require("dojo.data.ItemFileReadStore");
 
		dojo.ready(function(){
 
			var targetNode = dojo.byId("grid.debug");
 
			var xhrArgs = {
				url: "../json/index.php",
				handleAs: "json",
				load: function(data, ioArgs){
 
			    	var dataStore = new dojo.data.ItemFileReadStore({data: { items: data}});
					var gridStructure = [
	                   [
	                     { field: "numero", 	 	 name: "Numéro", 			width: 5,  },
	                     { field: "marque", 	 	 name: "Marque", 			width: 5,  },
	                     { field: "modele",  		 name: "Modèle", 			width: 10, },
	                     { field: "immatriculation", name: "Immatriculation", 	width: 15, },
	                     { field: "date_immat", 	 name: "Date immat", 		width: 10, }
	                   ]
	                 ];		                 
 
					var grid = new dojox.grid.DataGrid({
						id: "grid",
						jsid: "grid",
						store: dataStore,
						structure: gridStructure,
						style: 'width:761px;height:300px;'
					}, dojo.byId("grid.DataGrid"));
 
					grid.startup(); 
			    },
			    error: function(error){
			        targetNode.innerHTML = "An unexpected error occurred: " + error;
			    }
			};
 
			var deferred = dojo.xhrGet(xhrArgs);
		});
	</script>

A l'origine, j'y avais mis un identifier et un label, mais dès que je les ai enlevés, çà à fonctionner. Me reste à trouver pourquoi....