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

Get the details from the number

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

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