Map
Eksemplel 1
Dette er et minimalistisk eksempel. Vi etablerer en Map med følgende programlinjer:
personer1=new Map([
["Jensen",{adresse:"Storgt 2"}],
["Olsen",{adresse:"Hjemveien 4"}]
]);
Altså en index tabell med index-verdier ,keys, Jensen og Olsen. Til hver key er det knyttet en value. I dette tilfellet adressen. Vi skal se neden for at innholdet i value kan være mer komplisert, og fleksibelt.Vi lager en enkel funksjon for å vise innholdet:
dump1
Koden er slik:
function show1(){
var dump1=document.getElementById("dump1");
dump1.innerHTML="";
personer1.forEach(function(value,key)
{
dump1.innerHTML+=key+" bor i "+value.adresse+"\n";
})
}
Eksempel 2
Her utvider vi fleksibiliteten i de objektene som indeksere. Vi etablerer en Map med følgende programlinjer:
var personer2=new Map([
["Jensen",{adresse:"Storgt 2",tlf:"12345"}],
["Olsen",{adresse:"Hjemveien 4"}],
["Andersen",{adresse:"FuruLia 2",epost:"af@p.com"}]
]);
dump2
Koden er slik:
function show2(){
var dump2=document.getElementById("dump2");
dump2.innerHTML="";
var lines=[];
personer2.forEach(function(value,key)
{
T=key+","+value.adresse;
if(value.epost)
T+=",epost:"+value.epost;
if(value.tlf)
T+=",tlf:"+value.tlf;
lines.push(T);
})
lines.sort();
for(var i=0; i< lines.length; i++)
dump2.innerHTML+=lines[i]+"\n";
}
Eksempel 3
Her utvider vi fleksibiliteten i de objektene som indeksere. Vi etablerer en Map med følgende programlinjer:
var personer3=new Map([
["Jensen",
{adresse:"Storgt 2",tlf:72725,
biler:[{type:"Ford",regnr:"AE127"}]}],
["Olsen",
{adresse:"Hjemveien 4",
biler:[{type:"Ford",regnr:"AE523"},
{type:"VWGolf",regnr:"AE981"}]}],
["Andersen",
{adresse:"FuruLia 2",epost:"af@p.com"}]
]);
dump3
Koden er slik:
function show3(){
var dump3=document.getElementById("dump3");
dump3.innerHTML="";
var lines=[];
personer3.forEach(function(value,key)
{
T=key+"\n\t"+value.adresse;
if(value.epost)
T+=",epost:"+value.epost;
if(value.tlf)
T+=",tlf:"+value.tlf;
if(value.biler){
T+="\n\t";
for(var i=0; i<value.biler.length;i++ )
T+=value.biler[i].type+"("+value.biler[i].regnr+") ";
}
lines.push(T);
})
lines.sort();
for(var i=0; i< lines.length; i++)
dump3.innerHTML+=lines[i]+"\n";
}
Eksempel 4
Her henter vi dataene fra fil ved hjelp av fetch når vi etablerer Map-objektet. Du finner en bra introduksjon hos MDN [2] , og du finner eksempler på Fetch-sidene i dette materialet, Fetch
Dataene er plassert i en json-fil. Du kan se den i nettleseren her: personer4.json.
dump4
To funksoner er invovert:
fetch-funksjonaliteten:
function getData(){
fetch("personer4.json", {cache: "no-cache"})
.then(function(response) {
if(response.ok)
return response.json();
throw(response.statusText);
})
.then(function(myJson) {
personer4 =new Map(myJson);
show4();
})
.catch(function(err) {
alert("data er ikke lastet \n"+err);
});
}
og selve utskriften ( som er lik eksempel 3)
function show4(){
var dump4=document.getElementById("dump4");
dump4.innerHTML="";
var lines=[];
personer4.forEach(function(value,key)
{
T=key+"\n\t"+value.adresse;
if(value.epost)
T+=",epost:"+value.epost;
if(value.tlf)
T+=",tlf:"+value.tlf;
if(value.biler){
T+="\n\t";
for(var i=0; i<value.biler.length;i++ )
T+=value.biler[i].type+"("+value.biler[i].regnr+") ";
}
lines.push(T);
})
lines.sort();
for(var i=0; i< lines.length; i++)
dump4.innerHTML+=lines[i]+"\n";
}
