Gestione dei File JSON con Ajax e Javascript

Sintassi Javascript

// inizio chiamata ajax
// XMLHttpRequest è usato per scambiare i dati con il server
// open() e send() servono per comunicare con il server
let asideJson = new XMLHttpRequest();
asideJson.open("GET", "../../import/sidemenu.json", true);
asideJson.send();

// seleziona l'elemento con l'id asidebar
let insideAside = document.getElementById('asidebar');

// crea l'elemento html nav e dagli la classe sidenav
let createNav = document.createElement('nav');
createNav.classList.add('sidenav');

// definisci le modalità di caricamento del file json (4 = ad operazione completa) e se lo status del file è 200 (è stato trovato il file ed è andato a buon fine)
asideJson.onreadystatechange = function(){
    if( this.readyState == 4 && this.status == 200){
    //trasforma il file json in un oggetto JS
      let myArray = JSON.parse(asideJson.responseText)
    
    //lancia la funzione
    myMenu(myArray);    

    function myMenu(jsonData){
        let title = jsonData['sidemenu'];
            //Cicla all'interno del file json, precisamente all'interno di sidemenu
            for(i = 0; i < title.length; i++) {
            //creazione Titoli di Lista
let createOl = document.createElement('ol');
createOl.classList.add('listnumber');
createOl.setAttribute("title", title[i].navnode);
insideAside.appendChild(createNav);
createNav.appendChild(createOl);

let menuEl = title[i].structure;
//Cicla all'interno del file json, precisamente all'interno del nested json precisamente sotto sidemenu » structure
for(j=0; j < menuEl.length; j++){
    let createLi = document.createElement('li');
    createLi.classList.add('item-nav','af5');
    
    let createA = document.createElement('a');
    createA.classList.add('link-item-nav');
    createA.innerHTML = menuEl[j].linktxt;
    createA.setAttribute("href", menuEl[j].url);

    createOl.appendChild(createLi);
    createLi.appendChild(createA);
};
            };
        };
    };
};

let cardJson = new XMLHttpRequest();
cardJson.open("GET", "../../import/card.json", true);
cardJson.send();


cardJson.onreadystatechange = function(){
    if( this.readyState == 4 && this.status == 200){
        let myArray = JSON.parse(cardJson.responseText)

        showCard(myArray);

        function showCard(jsonData){
            let insideCard = document.createElement("div");
            let createContainerC = document.createElement("div");
            let createDivC = document.createElement("div");
            let createPicC = document.createElement("picture");
            let createImgC = document.createElement("img");
            let createDetailC = document.createElement("div");
            let createNameC = document.createElement("h3");
            let createPC = document.createElement("p");
            let createBotC = document.createElement("div");
            let createContactA = document.createElement("a");

            insideCard.classList.add("center");
            insideCard.setAttribute("id","developer");
            insideCard.setAttribute("style","margin-top:5em")
            createContainerC.classList.add('my-card','card');
            createDivC.classList.add('my-header');
            createImgC.classList.add('my-picture');
            createImgC.setAttribute("alt", jsonData['who'] );
            createImgC.setAttribute("src", jsonData['image'] );
            createDetailC.classList.add('my-details','bordo');
            createNameC.classList.add('cardname','center');
            createNameC.textContent = jsonData['who'];
            createPC.classList.add('desc','center');
            createPC.textContent = jsonData['work'];
            createBotC.classList.add('bottom-row');
            createContactA.classList.add('center');
            createContactA.textContent = jsonData['linkTxt'];
            createContactA.setAttribute("href", jsonData['link'] );

            insideAside.appendChild(insideCard);
            insideCard.appendChild(createContainerC);
            createContainerC.appendChild(createDivC);
            createDivC.appendChild(createPicC);
            createPicC.appendChild(createImgC);
            createContainerC.appendChild(createDetailC);
            createDetailC.appendChild(createNameC);
            createDetailC.appendChild(createPC);
            createDetailC.appendChild(createBotC);
            createBotC.appendChild(createContactA);
        };
    };
};  

Esempio in funzione: File JSON via Javascript

Sintassi JSON

{
  "sidemenu": [
    {
      "navnode": "Base jQuery",
      "structure": [
        {
          "url": "#",
          "linktxt": "Cos'è e cosa fà jQuery"
        },
        {
          "url": "#",
          "linktxt": "La selezion in jQuery"
        },
        {
          "url": "#",
          "linktxt": "Il selettore dell'elemento corrente"
        },
        {
          "url": "#",
          "linktxt": "Selezione degli attributti"
        },
        {
          "url": "#",
          "linktxt": "Selezione per posizione"
        },
        {
          "url": "#",
          "linktxt": "Selezione per relazione fra elementi"
        },
        {
          "url": "#",
          "linktxt": "Selezione per stato"
        }
      ]
    },
    {
      "navnode": "Gestione degli Eventi",
      "structure": [
        {
          "url": "#",
          "linktxt": "Eventi del Mouse"
        },
        {
          "url": "#",
          "linktxt": "Eventi della Tastiera"
        },
        {
          "url": "#",
          "linktxt": "Eventi dei Form"
        },
        {
          "url": "#",
          "linktxt": "Eventi del Browser"
        },
        {
          "url": "#",
          "linktxt": "Gestore degli eventi"
        },
        {
          "url": "#",
          "linktxt": "Chaining Eventi"
        }
      ]
    },
    {
      "navnode": "Gestione Animazione",
      "structure": [
        {
          "url": "#",
          "linktxt": "Introduzione Animazioni"
        },
        {
          "url": "#",
          "linktxt": "Animazioni Base"
        },
        {
          "url": "#",
          "linktxt": "Personalizzare Animazioni"
        }
      ]
    },
    {
      "navnode": "Manipolazione HTML e CSS in jQuery",
      "structure": [
        {
          "url": "#",
          "linktxt": "Intro DOM"
        },
        {
          "url": "#",
          "linktxt": "Aggiungere Elementi e Contenuti"
        },
        {
          "url": "#",
          "linktxt": "Rimuovere Elementi e Contenuti"
        },
        {
          "url": "#",
          "linktxt": "Sostituire Contenuto"
        },
        {
          "url": "#",
          "linktxt": "Manipolazione del CSS"
        },
        {
          "url": "#",
          "linktxt": "DOM traversing Iparte"
        },
        {
          "url": "#",
          "linktxt": "DOM traversing IIparte"
        },
        {
          "url": "#",
          "linktxt": "DOM filtering"
        }
      ]
    },
    {
      "navnode": "Funzioni Specifiche",
      "structure": [
        {
          "url": "#",
          "linktxt": "Funzione inArray"
        },
        {
          "url": "#",
          "linktxt": "Funzione Each"
        },
        {
          "url": "#",
          "linktxt": "Funzione Map"
        },
        {
          "url": "#",
          "linktxt": "Funzione Grep"
        }
      ]
    },
    {
      "navnode": "Plugin",
      "structure": [
        {
          "url": "#",
          "linktxt": "Principi di sviluppo Plugin jQ"
        }
      ]
    },
    {
      "navnode": "Ajax & Json con JS e Jquery",
      "structure": [
        {
          "url": "#",
          "linktxt": "Intro Ajax & JSON"
        },
        {
          "url": "#",
          "linktxt": "Gestione file testuale Ajax"
        },
        {
          "url": "#",
          "linktxt": "Gestione file Html"
        },
        {
          "url": "#",
          "linktxt": "Formattazione file JSON"
        },
        {
          "url": "#",
          "linktxt": "Gestione File JSON in Javascript"
        },
        {
          "url": "#",
          "linktxt": "Esercizio Ajax,JSON,Javascript"
        },
        {
          "url": "#",
          "linktxt": "Ajax con Jquery"
        },
        {
          "url": "#",
          "linktxt": "Gestione file JSON con jQuery"
        },
        {
          "url": "#",
          "linktxt": "Esercizio Ajax,JSON,Jquery"
        }
      ]
    },
    {
      "navnode": "Esercizi con Jquery",
      "structure": [
        {
          "url": "#",
          "linktxt": "Esercizio 1: Scroll al top"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 2: Regolare grandezza font"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 3: Abilitare un bottone"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 4: Effetto di zoom su foto"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 5: Modulo accordion"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 6: Elemento mobile con slide panel"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 7: Elemento scorrevole"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 8: Slideshow con funzionalità base"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 9: Slideshow con il plugin Cycle"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 10: Validare un form"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 11: Messaggio di conferma di un form"
        },
        {
          "url": "#",
          "linktxt": "Esercizio 12: Tooltip animato"
        }
      ]
    }
  ]
}