DOM Working with data

From ProgZoo
Jump to navigation Jump to search



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