par
Cyrano » 02 déc. 2011, 10:50
Ça n'a rien à voir avec AJAX même s'il est vrai que l'utilisation du JSON est courante avec AJAX.
JSON =
Java
Script
Object
Notation, ce qui veut dire que la chaine telle que tu la montres peut être utilisée telle quelle en JavaScript. Si tu initialises une variable xyz en lui affectant cette chaine comme valeur, tu pourras ensuite pointer sur les divers éléments qu'il contient.
Partons du début en créant donc cette variable avec une petite mise en forme pour faciliter sa lecture :
<script type="text/javascript">/* <![CDATA[ */
var xyz =
{
"windows": [
{
"id": "json01",
"title": "BoardDefinition",
"content": [
{
"Title": "PCB1",
"Value": "2.1"
},
{
"Title": "PCB2",
"Value": "2.3"
},
{
"Title": "PCB5",
"Value": "3"
}],
}]
};
/* ]]> */</script>
Avec la mise en forme, tu peux tout de suite voir une hiérarchie dans les éléments et sous-éléments, ainsi que la nature de ces éléments, en particulier les tableaux indexés avec les []. Ce qui nous intéresse donc en premier, c'est ce qu'il y a dans « windows » : on notera alors xyz.windows pour trouver son contenu. xyz.windows est un tableau indexé, donc la première chose est de connaitre le nombre d'éléments qu'il contient, on utilisera donc xyz.windows.length qui devrait ici nous retourner « 1 ». On peut donc ensuite créer une boucle pour aller ensuite pointer sur « content » qui est également un tableau indexé. Il faudra donc compter aussi ses éléments.
Voici un bout de code commenté pour te donner une idée de ce que tu pourrais faire pour afficher le contenu (Attention, tous les commentaires sont importants).
<script type="text/javascript">/* <![CDATA[ */
var xyz =
{
"windows": [
{
"id": "json01",
"title": "BoardDefinition",
"content": [
{
"Title": "PCB1",
"Value": "2.1"
},
{
"Title": "PCB2",
"Value": "2.3"
},
{
"Title": "PCB5",
"Value": "3"
}],
}]
};
/* On initialise une variable pour construire le contenu à afficher */
var msg = '';
/* On compte le nombre d'éléments dans xyz.windows */
nw = xyz.windows.length;
/* On boucle sur chacun des éléments de xyz.windows */
for (w = 0; w < nw; w++)
{
/* On compte le nombre d'éléments content de la ligne de windows en cours */
nc = xyz.windows[w].content.length;
/* On boucle sur chacun des éléments de content pour construire la sortie */
for (c = 0; c < nc; c++)
{
msg += xyz.windows[w].content[c].Title + ' ' + xyz.windows[w].content[c].Value + '<br \/>\n';
}
}
/* On affiche le contenu construit dans un élément HTML ayant pour identifiant « infosjson » */
window.document.getElementById('infosjson').innerHTML = msg
/* ]]> */</script>
En somme, chaque index associatif dans la chaine JSON sert de pointeur et on l'utilise pour cibler un endroit particulier à l'intérieur de cette chaine qui est en réalité un objet JavaScript.
Plus clair comme ça ?
Ça n'a rien à voir avec AJAX même s'il est vrai que l'utilisation du JSON est courante avec AJAX.
JSON = [b]J[/b]ava[b]S[/b]cript [b]O[/b]bject [b]N[/b]otation, ce qui veut dire que la chaine telle que tu la montres peut être utilisée telle quelle en JavaScript. Si tu initialises une variable xyz en lui affectant cette chaine comme valeur, tu pourras ensuite pointer sur les divers éléments qu'il contient.
Partons du début en créant donc cette variable avec une petite mise en forme pour faciliter sa lecture :
[html]
<script type="text/javascript">/* <![CDATA[ */
var xyz =
{
"windows": [
{
"id": "json01",
"title": "BoardDefinition",
"content": [
{
"Title": "PCB1",
"Value": "2.1"
},
{
"Title": "PCB2",
"Value": "2.3"
},
{
"Title": "PCB5",
"Value": "3"
}],
}]
};
/* ]]> */</script>
[/html]
Avec la mise en forme, tu peux tout de suite voir une hiérarchie dans les éléments et sous-éléments, ainsi que la nature de ces éléments, en particulier les tableaux indexés avec les []. Ce qui nous intéresse donc en premier, c'est ce qu'il y a dans « windows » : on notera alors xyz.windows pour trouver son contenu. xyz.windows est un tableau indexé, donc la première chose est de connaitre le nombre d'éléments qu'il contient, on utilisera donc xyz.windows.length qui devrait ici nous retourner « 1 ». On peut donc ensuite créer une boucle pour aller ensuite pointer sur « content » qui est également un tableau indexé. Il faudra donc compter aussi ses éléments.
Voici un bout de code commenté pour te donner une idée de ce que tu pourrais faire pour afficher le contenu (Attention, tous les commentaires sont importants).
[html]<script type="text/javascript">/* <![CDATA[ */
var xyz =
{
"windows": [
{
"id": "json01",
"title": "BoardDefinition",
"content": [
{
"Title": "PCB1",
"Value": "2.1"
},
{
"Title": "PCB2",
"Value": "2.3"
},
{
"Title": "PCB5",
"Value": "3"
}],
}]
};
/* On initialise une variable pour construire le contenu à afficher */
var msg = '';
/* On compte le nombre d'éléments dans xyz.windows */
nw = xyz.windows.length;
/* On boucle sur chacun des éléments de xyz.windows */
for (w = 0; w < nw; w++)
{
/* On compte le nombre d'éléments content de la ligne de windows en cours */
nc = xyz.windows[w].content.length;
/* On boucle sur chacun des éléments de content pour construire la sortie */
for (c = 0; c < nc; c++)
{
msg += xyz.windows[w].content[c].Title + ' ' + xyz.windows[w].content[c].Value + '<br \/>\n';
}
}
/* On affiche le contenu construit dans un élément HTML ayant pour identifiant « infosjson » */
window.document.getElementById('infosjson').innerHTML = msg
/* ]]> */</script>
[/html]
En somme, chaque index associatif dans la chaine JSON sert de pointeur et on l'utilise pour cibler un endroit particulier à l'intérieur de cette chaine qui est en réalité un objet JavaScript.
Plus clair comme ça ?