Bonjour

Je souhaite afficher un contenu JSON avec JavaScript sans passer par AJAX pas de requête xhr.
En fait je suis connecté à une carte électronique via Socket qui me renvois les résultats de tests en JSON et moi je dois récupérer ce contenu et l'afficher dans une fenêtre avec JavaScript.
Pour l'instant j'essaye de faire un affichage simple sans connexion, donc mon contenu est mis dans un fichier .JSON à part.

Voila à quoi peut ressembler mon fichier :

{"windows":[

{
"id": "json01",
"title":"BoardDefinition",
"content":
[{"Title":"PCB1","Value":"2.1" },
{"Title":"PCB2","Value":"2.3"},
{"Title":"PCB5","Value":"3"}],

}
]
}


Le résultat souhaité est le suivant :

PCB1 V2.1
PCB2 V2.3
PCB3 V3 ...

J'ai essayé de chercher sur plusieurs site mais tout le monde utilise AJAX, PHP ....

Merci d'avance

Ça n'a rien à voir avec AJAX même s'il est vrai que l'utilisation du JSON est courante avec AJAX.

JSON = JavaScript 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 ?