DOM working with data

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.

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"

Show the population

Alter your code so that the output matches the model answer.

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>`;
  });

List D contries

List all the countries beginning with D.

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('');
  });