Fagstoff

JSON

Vi ønsker ofte å utveksle data som variablar, lister og objekt mellom program og over nett. JSON er ein standard for å gjere om JavaScript-objekt til rein tekst, som lett kan overførast på mange ulike måtar.

Blå dokumentmappe med eit par ark som stikk ut, festa til ein blå vegg med mønster av liknande dokumentmapper og einarar og nullar. Illustrasjon.

JSON står for JavaScript Object Notation. Med JSON kan vi lagre objekt som skal brukast i JavaScript, som rein tekst. Det at dataa blir skilt frå koden, gjer det enklare å endre og halde ved like data som blir brukte av ein applikasjon eller webside. Dette liknar litt på å bruke Firebase eller andre NoSQL-databasar, men forskjellen er at JSON-data kan lagrast lokalt, i den same mappa som websida.

Lagre eitt objekt som JSON

Data i ei JSON-fil har ein spesifikk syntaks som skil seg litt frå korleis ein lagar objekt i JavaScript. Ei JSON-fil kan innehalde eitt objekt eller ei liste (array) med objekt. Her er eit døme på ei JSON-fil med eitt objekt:

hund.json

1{
2  "namn":"Fido",
3  "kjonn":"M",
4  "rase":"skotsk terrier",
5  "farge":"svart"
6}

JSON-data blir skrivne, som du kan sjå, som par av feltnamn og verdi, med eit kolon imellom, slik:

"feltnamn":"verdi"

Når vi set fleire felt etter kvarandre, bruker vi komma imellom og krøllparentesar rundt for å angi det som eit objekt.

Dersom eit felt har fleire verdiar, kan vi setje verdiane i ei liste, slik:

hund.json

1{
2  "namn":"Fido",
3  "kjonn":"M",
4  "rase":"skotsk terrier",
5  "farge":"svart",
6  "yndlingsmat":["fiskepudding", "griseøyre", "hundemat"]
7}

Lagre fleire objekt som JSON

Som nemnt kan ei JSON-fil innehalde ei liste med fleire objekt. Det kan vi skrive på denne måten:

hundar.json

1[
2  {
3    "namn":"Fido",
4    "kjonn":"M",
5    "rase":"skotsk terrier",
6    "farge":"svart",
7    "yndlingsmat":["fiskepudding", "griseøyre", "hundemat"]
8  },
9  {
10    "namn":"King",
11    "kjonn":"M",
12    "rase":"dvergpuddel",
13    "farge":"brun",
14    "yndlingsmat":["pasta", "loff"]
15  },
16  {
17    "namn":"Bella",
18    "kjonn":"F",
19    "rase":"boxer",
20    "farge":"blond",
21    "yndlingsmat":["biff", "hundemat"]
22  }
23]

Nokre gonger kan det vere nyttig å lagre eitt eller fleire objekt som verdi til eit felt inne i eit objekt. Det må vi gjere dersom vi vil legge til informasjon om eigaren av hunden. Då gjer vi slik:

hundar.json (med eigarar)

1[
2  {
3    "namn":"Fido",
4    "kjonn":"M",
5    "rase":"skotsk terrier",
6    "farge":"svart",
7    "yndlingsmat":["fiskepudding", "griseøyre", "hundemat"],
8    "eigar":{
9      "namn": "Rebecca Thomasen",
10      "telefon": "12345678"
11    }
12  },
13  {
14    "namn":"King",
15    "kjonn":"M",
16    "rase":"dvergpuddel",
17    "farge":"brun",
18    "yndlingsmat":["pasta", "loff"],
19    "eigar":{
20      "namn": "Gabrielle Martin",
21      "telefon": "23456789"
22    }
23  },
24  {
25    "namn":"Bella",
26    "kjonn":"F",
27    "rase":"boxer",
28    "farge":"blond",
29    "yndlingsmat":["biff", "hundemat"],
30    "eigar":{
31      "namn": "Jakob Nilsen",
32      "telefon": "2266445"
33    }
34  }
35]

Konvertere JSON-data

Det er mange måtar å få JSON-data inn på nettsida di på. I utgangspunktet er JSON-data berre tekst, så det kan overførast på mange måtar. Ofte vil JSON-data bli lesne inn frå ein webserver, frå ein database eller frå ei tekstfil på datamaskina di. Det finst derfor innebygde metodar i JavaScript for å konvertere JSON-data (tekst) til JavaScript-objekt, og motsett. Dei mest brukte av desse er JSON.parse(), som gjer om JSON-data til JavaScript-objekt, og JSON.stringify(), som gjer om JavaScript-objekt til JSON-data. Desse kan du lese om på W3Schools:

Importere JSON-data

Dersom du har lagra ei JSON-fil saman med nettsida di, eller dersom du har URL-en til ei JSON-fil som ligg på nettet, kan du importere JSON-dataa som ein modul i JavaScript, slik:

import data from "_URL_" with { type: "json" };

Denne koden både importerer JSON-dataa og konverterer dei (parse) til JavaScript-data. Du treng derfor ikkje å bruke metoden JSON.parse().

Merk at når du bruker import, må du legge inn type="module" i script-taggen på nettsida di, slik:

<script type="module">

import data from "_URL_" with { type: "json" };

</script>

Merk òg at data ikkje skal stå i krøllparentesar.

I tilfellet med hundar.json blir JSON-dataa importerte som ei liste med objekt, med variabelnamnet du har sett (data i dømet over). Dette variabelnamnet kan setjast til å vere kva du vil, til dømes hundar. For å hente ut namnet til den første hunden, kan du skrive denne koden:

script type="module"

1import hundar from "./hundar.json" with { type: "json" };
2
3console.log( hundar[0].namn )

Denne koden vil skrive ut Fido i konsollen.

For å skrive ut informasjon om alle hundane kan du bruke ei lykkje:

script type="module"

1import hundar from "./hundar.json" with { type: "json" };
2
3for(const hund of hundar){
4  console.log(
5    `${hund.namn} er ein ${hund.farge} ${hund.rase} eigd av ${hund.eigar.namn}.`
6  )
7}

Det vil gi denne utskrifta:

console

1Fido er ein svart skotsk terrier eigd av Rebecca Thomasen.
2King er ein brun dvergpuddel eigd av Gabrielle Martin.
3Bella er ein blond boxer eigd av Jakob Nilsen.

Dersom du i tillegg vil skrive ut yndlingsmaten til hundane, må du bruke ei lykkje inne i lykkja for å skrive ut innhaldet av lista med yndlingsmat for kvar hund. For at utskrifta skal bli fin, må vi trikse litt for å få inn komma og og når vi listar opp dei ulike mattypane. Koden blir slik:

script type="module"

1import hundar from "./hundar.json" with { type: "json" };
2
3// Lagar variablar som vi skal bruke i lykkja
4let utskrift = "";
5let pronomen = "";
6let yndlingsmat = "";
7let i = 0;
8
9// Lagar ei lykkje for å gå gjennom alle hundane
10for(const hund of hundar){
11
12  if(hund.kjonn == "F"){
13    // Set pronomen i utskrifta til "hennar" dersom hunden er hokjønn
14    pronomen = "hennar";
15  }else{
16    // Set pronomen i utskrifta til "hans" dersom hunden ikkje er hokjønn
17    pronomen = "hans";
18  }
19  
20  // Lagar ei lykkje for å gå gjennom yndlingsmaten til kvar hund
21  for(const mat of hund.yndlingsmat){
22  
23    if(hund.yndlingsmat.length - 2 > i){
24      // Set inn komma mellom elementa i utskrifta  
25      // for alle unnateke dei siste to elementa i lista
26      yndlingsmat += `${mat}, `;
27      i++;
28    }
29    else if(hund.yndlingsmat.length - 1 > i){
30      // Set inn nest siste element utan komma
31      yndlingsmat += `${mat} `;
32      i++;
33    }else{
34      // Set inn "og" framfor siste element
35      yndlingsmat += `og ${mat}`;
36      i++;
37    }
38
39  }
40
41  // Skriv ut til konsollen
42  console.log(`${hund.namn} er ein ${hund.farge} ${hund.rase}\
43  eigd av ${hund.eigar.namn}. \nYndlingsmaten ${pronomen} er ${yndlingsmat}.`)
44  // Tips: \n i console.log gir linjeskift i konsollutskrifta
45
46  // Nullstiller teljar og utskift av yndlingsmat 
47  // før neste gjennomkøyring av lykkja
48  i = 0;
49  yndlingsmat = "";
50  
51}

Då blir utskrifta slik:

console

1Fido er ein svart skotsk terrier eigd av Rebecca Thomasen. 
2Yndlingsmaten hans er fiskepudding, griseøyre og hundemat.
3
4King er ein brun dvergpuddel eigd av Gabrielle Martin. 
5Yndlingsmaten hans er pasta og loff.
6
7Bella er ein blond boxer eigd av Jakob Nilsen. 
8Yndlingsmaten hennar er biff og hundemat.

Objektorientert programmering

Lagre eitt objekt som JSON

Lagre fleire objekt som JSON

Konvertere JSON-data

Importere JSON-data