Johdatus ohjelmointiin

Sorakuilu

Demo 3, Esimerkki JSONin käytöstä

Lähde: Mozilla.org developer-sivusto

Esimerkissä on JSON-tiedosto, joka sisältää Parkour-mestareiden tietoja.

Tiedoston nimi on mestarit.json ja se näyttää seuraavalta:

{
  "listanNimi" : "Parkour Mestarit",
  "kotipaikka" : "Tampesteri",
  "muodostettu" : 2016,
  "kerhotila" : "Tornihotelli",
  "aktiivinen" : true,
  "jasenet" : [
    {
      "nimi" : "Manne Melkoinen",
      "ika" : 22,
      "lempinimi" : "Kumiukko",
      "vahvuudet" : [
        "Hypyt",
        "Ylitykset",
        "varjohypyt"
      ]
    },
    {
      "nimi" : "Anna Ahkera",
      "ika" : 19,
      "lempinimi" : "Hämis",
      "vahvuudet" : [
        "Tasapainoilu",
        "Kiipeäminen",
        "Köysitemput"
      ]
    },
    {
      "nimi" : "Eemeli Huikea",
      "ika" : 40,
      "lempinimi" : "Pilvipelle",
      "vahvuudet" : [
        "Kokemus",
        "Vauhti",
        "Kiipeäminen",
        "Hypyt"
      ]
    }
  ]
}

Demossa muokataan html-sivua, joka on aluksi seuraava:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Mestarit</title>

    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

      <header>

      </header>

      <section>

      </section>

    <script>
    var header = document.querySelector('header');
    var section = document.querySelector('section');
    
    </script>
  </body>
</html>

Lisäksi käytössä on tyylisivu style.css


HTML- (ja JavaScript) lähdekoodi

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Mestarit</title>

    <link href="https://fonts.googleapis.com/css?family=Faster+One" rel="stylesheet"> 
    <link rel="stylesheet" href="style.css">
  </head>

  <body>

      <header>

      </header>

      <section>

      </section>

    <script>
    var header = document.querySelector('header');
    var section = document.querySelector('section');

    //tehdään http-pyyntö (request)
    var requestURL = 'mestarit.json';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();

    request.onload = function() {
        var mestarit = request.response;
        rakennaHeader(mestarit);
        rakennaSectionit(mestarit);
    }

    function rakennaHeader(jsonObj) 
    {
        var myH1 = document.createElement('h1');
        myH1.textContent = jsonObj['listanNimi'];
        header.appendChild(myH1);

        var myPara = document.createElement('p');
        myPara.textContent = 'Kotipaikka: ' + jsonObj['kotipaikka'] + ' Perustettu: ' + jsonObj['muodostettu'];
        header.appendChild(myPara);
    }

    function rakennaSectionit(jsonObj)
    {
        var mestariluettelo = jsonObj['jasenet'];
        //taulukko
        for(let i = 0; i < mestariluettelo.length; i++) {
            var myArticle = document.createElement('article');
            var myH2 = document.createElement('h2');
            var myPara1 = document.createElement('p');
            var myPara2 = document.createElement('p');
            var myPara3 = document.createElement('p');
            var myList = document.createElement('ul');

            myH2.textContent = mestariluettelo[i].nimi;
            myPara1.textContent = 'Lempinimi: ' + mestariluettelo[i].lempinimi;
            myPara2.textContent = 'Ikä: ' + mestariluettelo[i].ika;
            myPara3.textContent = 'Vahvuudet: ';

            var vahvuus = mestariluettelo[i].vahvuudet;
            for(let j = 0; j < vahvuus.length; j++) {
                var listItem = document.createElement('li');
                listItem.textContent = vahvuus[j];
                myList.appendChild(listItem);
            }
            myArticle.appendChild(myH2);
            myArticle.appendChild(myPara1);
            myArticle.appendChild(myPara2);
            myArticle.appendChild(myPara3);
            myArticle.appendChild(myList);
            section.appendChild(myArticle);
        }
    }
    
    </script>
  </body>
</html>