DOM working with data
1) Get the name from the number
- You can obtain data from the server using a fetch call.
- In these examples you will be getting data from /worldl.json this is a list of 195 countries in json format
- The program snippet shows the name of country 42.
- Change it so it shows the name of country 50.
- See if you can find your country.
Input
xxxxxxxxxx
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[42];
document.body.innerHTML = tgt.name;
});
Output
fetch('/worldl.json') .then((r)=>r.json()) .then((r)=>{ let tgt = r[42]; document.body.innerHTML = tgt.name; });
fetch('/worldl.json') .then((r)=>r.json()) .then((r)=>{ let tgt = r[50]; document.body.innerHTML = tgt.name; });
Each country has a bunch of data associated, for example:
area: 330803 capital: "Kuala Lumpur" continent: "Asia" flag: "//upload.wikimedia.org/wikipedia/commons/6/66/Flag_of_Malaysia.svg" gdp: 304726000000 id: 102 name: "Malaysia" population: 30177000 tld: ".my"
2) Show the population
Alter your code so that the output matches the model answer.
Input
xxxxxxxxxx
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[102];
document.body.innerHTML =
`<div>${tgt.name}</div>`;
});
Output
fetch('/worldl.json') .then((r)=>r.json()) .then((r)=>{ let tgt = r[102]; document.body.innerHTML = `<div>${tgt.name}</div>`; });
fetch('/worldl.json') .then((r)=>r.json()) .then((r)=>{ let tgt = r[102]; document.body.innerHTML = `<div>${tgt.name} ${tgt.capital}</div>`; });
3) List D contries
List all the countries beginning with D.
Input
xxxxxxxxxx
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
document.body.innerHTML
= r.filter(x=> x.name.startsWith('D'))
.map(x => `<div>${x.continent}</div>`)
.join('');
});
Output
fetch('/worldl.json') .then((r)=>r.json()) .then((r)=>{ document.body.innerHTML = r.filter(x=> x.name.startsWith('D')) .map(x => `<div>${x.continent}</div>`) .join(''); });
fetch('/worldl.json') .then((r)=>r.json()) .then((r)=>{ document.body.innerHTML = r.filter(x => x.name.startsWith('D')) .map(x => `<div>${x.name}</div>`) .join(''); });