Et enkelt eksempel

Hva

I dette eksempelet oppsummeres kort hvordan vi kan plukke opp JavaScript objekter enten direkt eller ved hjelp av JSON. Vi bruker et veldig enkelt eksempel der vi beskriver beboerne på en adresse.

Det er flere on-line evalueringssider for json, f.eks. JSONLint [1] og Json Parser Online [2] , hvis du vil teste dine eksperimenter.

Direkte

Her lager vi et Javaskriptobjekt rett fram og inkluderer følgende JavaScript direkte i en js-fil:

var husObj={
    gateadresse:"Smalgt 2",
    postnummer:1700,
    sted:"Halden",
    personer:[
             {navn:"ole",alder:24,sitat:"\"du store alpakka\""},
             {navn:"kari",alder:32}
            ]
};

Merk at vi inkluderer " rundt sitatverdien med \". Vi viser denne direkte med følgende kode:

function test1(husObj,showId){
    var T="Innbyggerne i "+husObj.gateadresse+","
          + husObj.postnummer+"  "+husObj.sted+":";
    var beboere=husObj.personer;
    for(var ix=0;ix<beboere.length;ix++){
        T+='<br/>'+beboere[ix].navn+','+beboere[ix].alder;
        if(beboere[ix].sitat)
            T+=','+beboere[ix].sitat;
    }
    document.getElementById(showId).innerHTML=T;
}

Hvis vi ønsker å lage data i dette formatet på tjeneren og hente dem via en HTTP-request (AJAX) så må vi ta dataene som en string, legge dem inn i et script-element og parse dem. Du finner litt mer om dynamiske skript i modulen Dynamiske skript

JSON

Vi inkluderer følgende Javascript direkte i en js-fil:

var husString='{"gateadresse":"Smalgt 2",\
"postnummer":1700,\
"sted":"Halden",\
"personer":[\
    {"navn":"ole",\
     "alder":24,\
     "sitat":"\\"du store alpakka\\""},\
    {"navn":"kari",\
    "alder":32}\
    ]\
}';

Som du ser består hele Javaskriptet av deklarasjon av en stringvariabel.
Merk: at vi legger inn linjeskift i stringen ved hjelp av \ på slutten av linja.
Merk: at vi inkluderer " rundt sitatverdien med \\".

Vi viser denne med følgende kode:

function test2(showId){
    var Obj=JSON.parse(husString);
    test1(Obj,showId);
}

Hvis vi ønsker å lage data i dette formatet på tjeneren og hente dem via en HTTP-request (AJAX) så kan vi ganske enkel parse stringen.

Referanser

JSONLint arc90 jsonlint.com/ 02-11-2012

Json Parser Online json.parser.online.fr/ 02-11-2012