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 https://progzoo.net/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.population}</div>`;
  });

Include image

Include three div elements and an img for country 151. Use style='width:100px;' for the img

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let tgt = r[151];
     document.body.innerHTML = 
       `<div>${tgt.name}, ${tgt.capital}</div>`;
     });

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let tgt = r[151];
     document.body.innerHTML = `
<div>Name: ${tgt.name}</div>
<div>Capital: ${tgt.capital}</div>
<div>Population: ${tgt.population}</div>
<img src='${tgt.flag}' style='width:100px'/>
`;
     });

Output in a table

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let tgt = r[172];
     document.body.innerHTML = 
       `<div>${tgt.name}, ${tgt.capital}</div>`;
     });

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let tgt = r[172];
     document.body.innerHTML = `
<table>
<tr><th>Name</th><td>${tgt.name}</td</tr>
<tr><th>Continent</th><td>${tgt.continent}</td</tr>
<tr><th>Capital</th><td>${tgt.capital}</td</tr>
<tr><th>Population</th><td>${tgt.population}</td</tr>
</table>
`;
     });

Format numbers

For country 184. Use .toLocaleString() to format numbers better. Show the GDP in billions, include $ symbol as GDP is given in US dollars

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let tgt = r[184];
     document.body.innerHTML = 
       `<div>${tgt.population.toLocaleString()}</div>`;
     });

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let tgt = r[184];
     document.body.innerHTML =        `
<table>
<tr><th>Name</th><td>${tgt.name}</td></tr>
<tr><th>Continent</th><td>${tgt.continent}</td></tr>
<tr><th>Capital</th><td>${tgt.capital}</td></tr>
<tr><th>Population</th><td>${tgt.population.toLocaleString('en')}</td></tr>
<tr><th>GDP</th><td>$${(tgt.gdp/1e9).toLocaleString('en')} billion</td></tr>
</table>
`;
     });

Working with lists

In the following questions you must look at teh list of the countries to work out the answer.

Show the name of the country with the largest population.

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let biggest = 0;
     for(let i = 0; i<r.length; i++){
       if (r[i].area > r[biggest].area){
         biggest = i;
       }
     }
     document.body.innerHTML = 
       `<div>${r[biggest].name}</div>`;
   });

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     let biggest = 0;
     for(let i = 0; i<r.length; i++){
       if (r[i].population > r[population].area){
         biggest = i;
       }
     }
     document.body.innerHTML = 
       `<div>${r[biggest].name}</div>`;
   });