Discussion :

[Mornor]

Bonjour à tous,

Je me retrouve avec un JSON de la forme suivante :

Code :

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

{"data":[{"content":"event1","start":"new Date(2014,07,10)"},{"content":"event2","start":"new Date(2014,07,17)"}],"success":true}

Que j'ai créer afin de m'adapter à la structure javascript suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
data = [
          {
             'start': new Date(2010,7,23),
             'content': 'Event'
          },
          {
             'start': new Date(2010,7,23),
             'content': 'Event'
          },
];

Comment puis-je faire afin de rendre la structure javascript "dynamique" afin de pouvoir y ajouter tout les éléments de mon JSON, en prenant en compte le fait que je ne connait pas à l'avance le nombre d'éléments que celui-ci contiendra ?

Merci à ceux qui prendront le temps de me lire

[SpaceFrog]

data n'est pas un json, mais un array => push()

[Mornor]

J'ai pensé à quelque chose comme cela :

Code :

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

1
2
3
4
5
6
 
for(var i = 0 ; i < json.data.length ; i++)
{
    var item = data[i]; 
                ...
}

Mais je ne vois pas comment intégrer ça dans le code ?

[SpaceFrog]

http://jsfiddle.net/jBLcL/1/

[Mornor]

Ok, je commence à y voir un peu plus clair.

J'ai une erreur que je ne comprend tout de même pas : Uncaught TypeError: Cannot read property 'data' of undefined
A la ligne :

Code :

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

for(var i = 0 ; i < json.data.length ; i++){

je charge pourtant le Json de la façon suivante :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
var xhr = new XMLHttpRequest(); 
xhr.open("GET", "/Test", true); // Appel à un servlet java
xhr.send();  
 
var json;
 
xhr.onreadystatechange = function(){
   if(xhr.readyState == 4 && xhr.status == 200){
        json = JSON.parse(xhr.responseText);
   }
}

Et l'affiche comme cela :

Code :

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
 
data = [
  {
       'start': new Date(2010,7,23),
       'content': 'Buy a Polo'
   },
   {
       'start': new Date(2010,7,23,23,0,0),
       'content': 'Sell some books'
    },
];
 
    for(var i = 0 ; i < json.data.length ; i++){
        data.push({
           'start':data[i].start, 
            'content':data[i].content
         })
    }

D'ou proviens mon erreur d'incompréhension ?

[SpaceFrog]

Code :

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

json.data.

c'est quoi json.data ???

[Mornor]

c'est quoi json.data ???

Je déclare ma variable JSON :

Code :

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

var json

Que je parse :

Code :

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

1
2
3
4
5
6
 
xhr.onreadystatechange = function(){
  if(xhr.readyState == 4 && xhr.status == 200){
      json = JSON.parse(xhr.responseText);
   }
}

Elle contient donc bien un champ "data", non ?
Car le Json reçu est :

Code :

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

{"data":[{"content":"event1","start":"new Date(2014,07,10)"}]

[SpaceFrog]

Code :

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

json['data']

[Mornor]

J'arrive à quelque chose, mais je ne comprends pas pourquoi les données du JSON ne sont pas chargées ?

Code :

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
var json;
var jsonLength; 
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        json = JSON.parse(xhr.responseText);
        jsonLength = json.data.length; 
    }
}
// Create a JSON data table 
data = [{
    'start': new Date(2010,7,23),
    'content': 'Buy a Polo'
    // Add a picture : 'content': 'Mail from boss<br><img src="img/mail-icon.png" style="width:32px; height:32px;">'
},{
    'start': new Date(2010,7,23,23,0,0),
    'content': 'Sell some books'
},];
for(var i = 0 ; i < jsonLength ; i++){
    data.push({
        'start':json.data[i].start, 
        'content':json.data[i].content
    })
}

Vous savez m'expliquez ?

[SpaceFrog]

Code :

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

jsonLength = json.data.length;

Code :

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

jsonLength = json['data'].length;

[Mornor]

Code :

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

jsonLength = json.data.length;

En faisant de la sorte

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var json;
var jsonLength; 
 
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
        json = JSON.parse(xhr.responseText);
        jsonLength = json.data.length;
        alert(jsonLength); 
    }
}

J'obtiens la longueur effective du JSON.
Remarque : J'obtiens exactement le même résultat en faisant

Code :

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

jsonLength = json['data'].length;

Le problème vient du fait (je pense) que la boucle for n'est pas prise en compte :

Code :

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

1
2
3
4
5
6
7
 
for(var i = 0 ; i < jsonLength ; i++){
            	data.push({
            		'start':json.data[i]['start'],
            		'content':json.data[i]['content']
            	})
            }

Edit ; Je confirme, pas de rentrée dans la boucle.

[Mornor]

En somme, je n'arrive pas à accéder au champ data de mon JSON, que ce soit en faisant :

Code :

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

json.data[i].start

Ou bien :

Code :

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

json['data[i]']['start']

Comment y accéder ?

[Bovino]

Je confirme, pas de rentrée dans la boucle.

C'est normal : tu essayes de rentrer dans ta boucle avant d'avoir reçu les données !
Un classique AJAX : utiliser les données au bon moment !

[SpaceFrog]

Tout le code doit être lancé DANS ton (xhr.readyState == 4 && xhr.status == 200)

[Mornor]

Merci pour cet article, cela m'aide effectivement bien !

J'ai codé selon vos conseils pour obtenir cela :

Code :

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
25
26
27
28
29
30
 
var json;
var jsonLength; 
 
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
  json = JSON.parse(xhr.responseText);
  jsonLength = json.data.length; 
 
   for(i=0; i<jsonLength; i++){
        data.push( {
            'start': new Date(2010,7,23),
             'content': 'Hello'
         })
      }
     alert('Hello'); 
   }
  }
 
   // Create a JSON data table 
   data = [
    {
     'start': new Date(2010,7,23),
     'content': 'Event 1'
      },
      {
      'start': new Date(2010,7,23),
       'content': 'Event 2'
       }
    ];

Mais rien n'y fait, seul 'Event1' et 'Event2' sont présents dans la table data ...

Qu'est-ce que je manque dans ce raisonnement ? Tout me semble logique ...

EDIT : En mettant des breakpoints (via Chrome) sur la ligne :

Code :

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

data.push

, je vois bien que la variable data se remplit correctement. Dés lors, pourquoi celle-ci n'est-elle pas mise à jour après l'appel de cette fonction ?

[SpaceFrog]

as tu vérifié dans la console le retour de ton ajax ?

[Mornor]

Oui, j'ai bien vérifié.

Je viens de trouver la solution. Je n'avais pas vu les quelques lignes tout en bas du code (ce n'est pas le mien à la base) :

Code :

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

1
2
3
 
timeline = new links.Timeline(document.getElementById('mytimeline'), options);
timeline.draw(data);

Que je viens de rajouter dasn la méthode onreadystatechange.

J'arrive donc à afficher le content du JSON de cette façon :

Code :

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

'content':json.data[i].content

Néanmoins, je ne parviens pas à afficher la date, qui pour rappel est de cette forme dans le JSON :

Code :

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

{"data":[{"content":"event1","start":"new Date(2014,07,10)"}]

Et qui doit être dans le tableau data de la forme suivante :
'start':new Date(yyyy,mm,jj)

Le problème viendrait-il du JSON quik serait mal construit ?

[SpaceFrog]

heu tu génères ton json codé php ?
js n'est pas interprété coté serveur ...

[Mornor]

Le Jsn est effectivement généré côté serveur (servlet java).
Pour info, voici le code :

Code :

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
 
JSONObject toSendBack = new JSONObject(); 
JSONArray dataArray = new JSONArray();	
 
for(int i = 0 ; i < items.size() ; i += 3){ // Items est une Arryalist, non utile pour la suite de la compréhension du code. 
   JSONObject row = new JSONObject(); 
   String date = items.get(i+2).replaceAll("-", ","); 
 
   // Génération de la date (créera par exemple : new Date(2014,07,09) )
   row.put("start", new Date("+date+")); 
 
   row.put("content", items.get(i) +" :<br />"+items.get(i+1) ); 
   dataArray.put(row);
 }
 
toSendBack.put("data", dataArray); 
toSendBack.put("success", true);

EDIT :
Problème complétement résolu !
J'ai modifié la création du JSON pour ne mettre que le String représentant la date.

Tout grand merci à SpaceFrog ainsi que Bouvino pour m'avoir bien aider !

[SpaceFrog]

:ccol: bravo a toi pour tes déductions