création Objet Javascript

Version imprimable

Bonjour,

à partir de ma bdd j'essaye de constituer un objet JS pour par la suite l'utiliser dans un tableau :

je m'explique :

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
 
var data = 
    { 
       	"mbre_crea":<?php echo '1320';?>,
       	"offre": <?php echo '50'; ?>,
		"date_heure" : {
        	<?php 
                        $cpt = 0;       
                $sql = "SELECT DATE_FORMAT(duree, '%Y-%m-%d') as ma_date,
                                DATE_FORMAT(duree, '%H:%i') AS mon_heure
                                FROM evenement_n";      
                $res = send_sql('mum_module',$sql)or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error());
                
                while($data = mysql_fetch_assoc($res)) 
                        {
                                $d = $data['ma_date'];
                                $h = $data['mon_heure'];
                                if($cpt!=0) { echo ','; }
                                                                
                        ?>	
			"<?php echo $d; ?>":{
				"date_jour" :"<?php echo $d; ?>",
				"heures_jour" :"<?php echo $h; ?>"
			}
		<?php
                        $cpt++;
                        }
                ?> 
    }     
};

quand j'affiche ma source j'obtiens bien

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
 
        var data = 
		{ 
       	"mbre_crea":1320,
       	"offre": 50,
		"date_heure" : {
 
			"2010-03-16":{
				"date_jour" :"2010-03-16",
				"heures_jour" :"10:00"
			}
		,	
			"2010-03-17":{
				"date_jour" :"2010-03-17",
				"heures_jour" :"12:00"
			}
		,	
			"2010-03-19":{
				"date_jour" :"2010-03-19",
				"heures_jour" :"15:00"
			}
		,	
			"2010-03-25":{
				"date_jour" :"2010-03-25",
				"heures_jour" :"08:30"
			}
 
    }     
};

mais je ne suis pas sûr de la forme de celui-ci

il faut que je puisse interpréter les données dans mes boucles qui constitue mon tableau dans ce genre la :

Code:

1
2
3
4
5
6
7
8
 
 
if(cell.le_jour == '2010-3-23' & tes_heures[j-1] == '11:30'){
	cell.className = "cellule_check";
 
} else {
	cell.className = "cellule_";
}

Merci :)

il faut que ton php génère le code suivant:
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 { mbre_crea:1320, offre: 50, date_heure : { "2010-03-16":{ date_jour :"2010-03-16", heures_jour :"10:00" } , "2010-03-17":{ date_jour :"2010-03-17", heures_jour :"12:00" } , "2010-03-19":{ date_jour :"2010-03-19", heures_jour :"15:00" } , "2010-03-25":{ date_jour :"2010-03-25", "heures_jour" :"08:30" } } }
puis coté js

Code:

var data= eval( '('+le_string_json+')')

par contre je ne vois pas l'utilité de date_jour... ni de heur_jour du coup ^^

Code:

{ ...,"2010-03-25":"08:30", ..}

suffirait...
mais peut être as tu des impératifs que je ne connais pas

Citation:

par contre je ne vois pas l'utilité de date_jour... ni de heur_jour du coup ^^

bien c'était pour avoir deux propriétés ?

pour que ma boucle test la condition ci-dessus :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 for(var i = 0; i < 6; i++) { cell = document.createElement("td"); ... if(cell.le_jour == data.date_jour[i] & tes_heures[j-1] == data.heures_jour[i]){ cell.className = "cellule_check"; } else { cell.className = "cellule_"; } }
enfin je pensais à quelque chose du genre :)

en fait parcourir l'ensemble de l'objet, tester la date et l'heure et le signaler par un changement de couleur de cellule dans le tableau

25/03/2010, 10h19
emmanuel.remy
Salut,

Pour rebondir sur ce qu'écrit SpaceFrog: le eval est fait quand on souhaite manipuler une chaine au format JSON, par exemple en réponse à une requête AJAX. Or toi tu es dans le cas général de la génération de ta page HTML et de son code javascript ce qui est un peu différent. Tu n'as techniquement pas besoin de faire cet eval. D'un autre côté l'aspect pratique voudrait que tu utilises la fonction PHP json_encode ce qui t'éviterait de réinventer la roue de JSON...

L'accès à tes valeurs est différent; étant tu les nommes en utilisant parfois un caractère qui ne sont pas valables (-), tu devras faire:
Code:

1 2 alert(data.mbre_crea); alert(data.date_heure["2010-03-17"].date_jour);
.

Enfin attention à ce code:

Code:

if(cell.le_jour == data.date_jour[i] & tes_heures[j-1] == data.heures_jour[i]){

il faut inscrire && et pas &

ERE
25/03/2010, 11h48
Nick_Rivers

bonjour,

merci de ta réponse :P

Donc si je comprends bien il faudrait que j'encode en Json le résultat de ma requête

soit créer un tableau associatif et ensuite l'encoder ?

et ensuite traiter cette chaine

autrement d'accord

Code:

alert(data.date_heure["2010-03-17"].date_jour);

mais je dois zapper quelque chose pour l'utiliser dans ma boucle et ainsi récupérer toute les dates et heures

Code:

alert(data.date_heure[i].date_jour);

en fait c'est surtout comment "parcourir" cet objet ici j'ai une clé sous forme de caractère exact ? :oops:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
var data={ 
       	mbre_crea:1320,
       	offre: 50,
			date_heure : {
        		"2010-03-16":"10:00",
				"2010-03-17":"12:00",
				"2010-03-19":"15:00"	,	
				"2010-03-25":"08:30"
			}
 
    	}     
 
contenu=""
for (elt in data.date_heure){
    contenu += elt +"\t=>" + data.date_heure[elt] +'\n';
    }
 alert (contenu)   
</script>

25/03/2010, 13h06
Nick_Rivers

je comprends plus ou moins ! :P

ici tu déplaces les "variables heures" dans les propriétés de l'objet qui sont les dates

est ce qu'il faut qu'a partir de ça je créé deux nouveau tableaux ? séparer la date et l'heure ?

et ensuite utiliser ma condition du type :

Code:

if(cell.le_jour == '2010-3-24' && tes_heures[j-1] == '11:30' )

ou je peux atteindre "contenu" et faire ma condition

j'avoue être perdu :)

Merci en tout cas

Suite à la discussion :]

voilà une partie la structure de mon tableau ainsi que la solution pour l'objet JS que tu as expliqués plus haut.
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 var data2={ mbre_crea:1320, offre: 50, date_heure : { "2010-03-23":"10:00", "2010-03-24":"12:00", "2010-03-25":"15:00", "2010-03-26":"08:30" } } contenu= []; for (var elt in data2.date_heure){ contenu[elt]= data2.date_heure[elt] ; } for(var j = 0; j < 25; j++) { row = document.createElement("tr"); row.id = j; for(var i = 0; i < 6; i++) { cell = document.createElement("td"); .................................. document.body.appendChild(cell); row.appendChild(cell); } tablebody.appendChild(row); }
ce que je cherche à faire c'est que dans ma deuxième boucle, je compare les dates et heures qui sont dans l'objet avec les proprietés des cellules qui sont aussi des dates et heures. si il y a "égalité" on colorise les cellules concernées.

voici ma condition :
Code:

1 2 3 4 5 6 7 8 9 10 11 cell.le_jour = +d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate(); cell.lheure = tes_heures[j-1]; if(cell.le_jour == '2010-3-24' && cell.lheure == '11:30' ){ cell.className = "cellule_check"; } else { cell.className = "cellule_"; }
ici je force une date et une heure ainsi ça me colorise la cellule concernée.

avec une boucle classique je vois comment récupérer les dates et l'heure qui lui correspond mais la je patauge un peu beaucoup pour tester toute les dates et heures de l'objet :)

j'espère avoir été plus clair sur mon problème ! ^^

Code:

1
2
3
4
5
6
7
8
for (elt in data2.date_heur){
   if(cell.le_jour == elt && cell.lheure == data2.date_heure[elt] ){
	cell.className = "cellule_check";
   }
   else {
	cell.className = "cellule_";
   }
}

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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
 
<script type="text/javascript">
var data2={ 
       	mbre_crea:1320,
       	offre: 50,
			date_heure : {
        		"2010-03-16":"10:00",
				"2010-03-17":"12:00",
				"2010-03-19":"15:00"	,	
				"2010-03-25":"08:30"
			}
	}
 
 
function colorise(){
tabtr =document.getElementsByTagName('tr')
var i=0;
 
 
while(tabtr[i++]){
var thisone=0;
  var tabtd=tabtr[i-1].getElementsByTagName('td')
  var le_jour =tabtd[0]
  var lheure=tabtd[1]
 
for (elt in data2.date_heure){
   if((le_jour.innerHTML == elt) && (lheure.innerHTML== data2.date_heure[elt]) ){
	        thisone++;
	          	}
 
   	le_jour.parentNode.className = (thisone>0)?"cellule_check":"cellule_";
 	}
 }	  
} 
 
 
</script>
<style type="text/css">
.cellule_check {background-color:red;}
.cellule_ {background-color:green;}
</style>
</head>
 
<body onload="colorise()">
 
<table>
	<tr>
		<td>2010-03-16</td>
		<td>10:00</td>
	</tr>	
	<tr>
		<td>2010-03-26</td>
		<td>12:00</td>
	</tr>	
	<tr>
		<td>2025-03-26</td>
		<td>12:00</td>
	</tr>	
 
 
 
</body>

C'est exactement ça :)

maintenant le plus dur il faut que j'adapte à mon code ! lol

Edit :

ce que je comprends pas :
Code:

1 2 3 4 5 6 7 8 9 10 var thisone=0 for (var elt in data2.date_heure){ if(i!=0 & j!=0) { if(cell.le_jour == elt && cell.lheure == data2.date_heure[elt] ){ thisone++; } } cell.className = (thisone)?"cellule_check":"cellule_"; }
cette boucle je la place bien au bon endroit ça devrait marcher

elle parcourt pourtant bien toutes les dates (elt) et toutes les heures (data2.date_heure[elt])

et compare bien avec les propriétés des cellules :calim2:

25/03/2010, 22h10
emmanuel.remy

Salut,

Attention une fois de plus:

Code:

if(i!=0 & j!=0) {

il faut && et non &

ERE
27/03/2010, 18h40
Nick_Rivers

oui pour la syntaxe :)

bon je suis toujours bloqué avec mon DOM pour trouver une solution :?

je vais essayer de me re pencher un peu plus sur l'exemple de SF pour l'adapter une fois de plus

Pourtant la boucle ci-dessus remplie bien son rôle !! je comprends pas.
10/06/2010, 15h54
Nick_Rivers
petit dépoussiérage en règle !

Petit récapitulatif :

comme indiqué plus haut j'utilise maintenant json_encode et récupère mon objet via un traitement Ajax)
Code:

1 2 3 4 5 6 7 $tab_event = array(); array_push($tab_event, '"'.$ma_date.'":"'.$mon_heure.'"'); .... header("X-JSON: " . json_encode($tab_event));
ce qui me donne le format :

Code:

"2010-05-18":"08:00","2010-05-18":"10:00","2010-05-18":"11:00","2010-05-18":"12:00",

Dans l'exemple du dessus de SpaceFrog

l'objet est ainsi :
Code:

1 2 3 4 5 6 var data2={ mbre_crea:1320, offre: 50, date_heure : {'2010-03-16':'10:00',"2010-03-17":"12:00","2010-03-19":"15:00","2010-03-25":"08:30"} }
de mon coté :
Code:

1 2 3 4 5 6 7 8 onSuccess: function(transport, json) { if (transport.status == 200) { document.getElementById('reponse').innerHTML = json; var data2={ date_heure : json }; ... },
mais ça ne va pas.

le innerHTML me permet de visualiser l'objet json retourné.

au niveau de var data2 j'ai essayé de différente manière

que ce soit avec : { transport.responseJSON } ou eval() mais aucun résultat.

une petite idée ?

Merci :)
10/06/2010, 16h03
SpaceFrog

Code:

json= eval('('+json+')')

Presque bon :)

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
 
onSuccess: function(transport, json) {
	if (transport.status == 200) {
		document.getElementById('reponse').innerHTML = json;
 
		//var json2 = transport.responseText.evalJSON();
		var data2={ 
			date_heure : json= ('('+json+')')
		};
 
 
		tabtr =document.getElementsByTagName('tr')
		var i=0;
 
		while(tabtr[i++]){
			var thisone=0;
			var tabtd=tabtr[i-1].getElementsByTagName('td');
			var le_jour =tabtd[0];
			var lheure=tabtd[1];
 
			for (elt in data2.date_heure){
 
				if((le_jour.innerHTML == elt) && (lheure.innerHTML== data2.date_heure[elt]) ){
					thisone++;
				}
 
				le_jour.parentNode.className = (thisone>0)?"cellule_check":"cellule_";
			}
		}	  
 
		} else {
			document.getElementById('reponse').innerHTML = 'NO JSON';
		}
},

j'ai essayé avec le

Code:

json= eval('('+json+')')

et même sans le json= aucun résultat. parcontre si je vire eval();

si je reprends ton exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<table> 
	<tr> 
		<td>2010-05-18</td> 
		<td>08:00</td> 
	</tr>	
	<tr> 
		<td>2010-03-16</td> 
		<td>10:00</td> 
	</tr>	
	<tr> 
		<td>2010-03-26</td> 
		<td>12:00</td> 
	</tr>	
	<tr> 
		<td>2025-03-26</td> 
		<td>12:00</td> 
	</tr>	
 </table>

tout se colorise en vers.

il y a pourtant une date ds l'objet json qui est bonne avec le tableau donc qui devrait être colorisée en rouge. (comme ton exemple :) )

si je reprends ton objet plus haut, ça marche nickel donc ça vient vraiment de l'interprétation du mien.

Autre petit problème soulevé :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var data2={ mbre_crea:1320, offre: 50, date_heure : { "2010-6-7":"10:00", "2010-6-8":"12:00",// premier event ce jour là "2010-6-8":"14:00",// second event même jour "2010-6-9":"15:00", "2010-6-10":"10:30", "2010-6-11":"8:30", "2010-6-11":"9:30" } }
Mon objet JSON ne va pas.
ici si plusieurs horaires le même jours un seul est prit en compte.

tout simplement parce que les clés d'un objet doivent être uniques il me faudrait donc apparemment quelque chose dans ce genre là :

Code:

"2010-6-8":["12:00","14:00"],

?

comment accéder à cette clé ducoup ? :)

11/06/2010, 20h59
SpaceFrog
Oui bien vu la clef soit être unique en json et ton contournement est juste parfait car la syntaxe en devient super ergonomique:
Code:

1 2 json["2010-6-8"][0] json["2010-6-8"][1]
vu qu'il s'agit d'un array :ccool:

Oui :P

j'ai donc bien réussi à créer mon objet de la sorte :

Code:

1
2
3
4
5
6
7
8
9
10
11
       var data2={ 
               	mbre_crea:1320,
               	offre: 50,
	                date_heure : {
	          		  "2010-6-14":["10:00", "12:00"],
	          		  "2010-6-15":["12:00","14:00"],
	          		  "2010-6-16":["15:00"],
	          		  "2010-6-17":["10:30"],
	          		  "2010-6-18":["8:30","9:30"]
	          		}
            	}

donc la bien dans le cas de clé unique pour chaque date

il me reste simplement quelques difficultés à le parcourir ça parait pourtant évident

cette première boucle

Code:

1
2
3
4
5
6
7
8
9
10
 
var thisone=0
   for (var elt in data2.date_heure){
	if(i!=0 & j!=0) {
	   if(cell.le_jour == elt && cell.lheure == data2.date_heure[elt] ){
		thisone++;
	  }
	}
	cell.className = (thisone)?"cellule_check":"cellule_"; 
  }

ou alors celle-ci

Code:

1
2
3
4
5
6
 
for (var elt in data2.date_heure){
	for(var i=0,l=elt.length;i<l;i++) {
	....		
        }
}

sans résultat donc je dois vraiment m'y prendre comme un pied pour le parcourir ! :)

Edit :

je pense pas être loin ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
for (var elt in data2.date_heure){	
   	  	if(cell.le_jour == elt){
			if(data2.date_heure[elt].length > 0){
				var  reg =new  RegExp("[ ,;]+", "g");
				var test = String(data2.date_heure[elt]);
				var tableau = test.split(reg);
				for  (var  i=0; i<tableau.length; i++)  {
				 	if(cell.lheure == tableau[i] ){
						thisone++;
					}
				}
			}
		}
		cell.className = (thisone)?"cellule_check":"cellule_"; 
	 }