JSON et structure javascript dynamique

Bonjour à tous,

Je me retrouve avec un JSON de la forme suivante :

Code:

---

{"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:

---

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

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

J'ai pensé à quelque chose comme cela :

Code:

---

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 ?

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

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:

---

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

---

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

Code:

---

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:

---

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 ?

Code:

---

json.data.

---

c'est quoi json.data ???

Citation:

---

Envoyé par SpaceFrog

c'est quoi json.data ???

---

Je déclare ma variable JSON :

Code:

---

var json

---

Que je parse :

Code:

---

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:

---

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

---

Code:

---

json['data']

---

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

Code:

---

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 ?

Code:

---

jsonLength = json.data.length;

---

:roll:

Code:

---

jsonLength = json['data'].length;

---

Citation:

---

Envoyé par SpaceFrog

Code:

---

jsonLength = json.data.length;

---

---

En faisant de la sorte

Code:

---

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:

---

jsonLength = json['data'].length;

---

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

Code:

---

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.

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

Code:

---

json.data[i].start

---

Ou bien :

Code:

---

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

---

Comment y accéder ?

Citation:

---

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 !
:arrow: Un classique AJAX : utiliser les données au bon moment !

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

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

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

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

---

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 ?

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

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:

---

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:

---

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

---

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

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

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

Code:

---

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 !

:ccol: bravo a toi pour tes déductions ;)