Gestione dei File JSON con Ajax e Javascript

Gestione dei File JSON con Ajax e Javascript

indice

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" } ] } ] }

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Copyright © 2022
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram