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 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.

Input

fetch('/worldl.json') .then((r)=>r.json()) .then((r)=>{ let tgt = r[42]; document.body.innerHTML = tgt.name; });

xxxxxxxxxx

 

1

fetch('/worldl.json')

2

  .then((r)=>r.json())

3

  .then((r)=>{

4

     let tgt = r[42];

5

     document.body.innerHTML = tgt.name;

6

  });

7

​

Go reset

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

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

xxxxxxxxxx

 

1

fetch('/worldl.json')

2

  .then((r)=>r.json())

3

  .then((r)=>{

4

     let tgt = r[102];

5

     document.body.innerHTML = 

6

       `<div>${tgt.name}</div>`;

7

     });

8

​

Go reset

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

3) Include image

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

Input

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

xxxxxxxxxx

 

1

fetch('/worldl.json')

2

  .then((r)=>r.json())

3

  .then((r)=>{

4

     let tgt = r[151];

5

     document.body.innerHTML = 

6

       `<div>${tgt.name}, ${tgt.capital}</div>`;

7

     });

8

​

Go reset

Output

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

4) Output in a table

Input

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

xxxxxxxxxx

 

1

fetch('/worldl.json')

2

  .then((r)=>r.json())

3

  .then((r)=>{

4

     let tgt = r[172];

5

     document.body.innerHTML = 

6

       `<div>${tgt.name}, ${tgt.capital}</div>`;

7

     });

8

​

Go reset

Output

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

5) 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

Input

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

xxxxxxxxxx

 

1

fetch('/worldl.json')

2

  .then((r)=>r.json())

3

  .then((r)=>{

4

     let tgt = r[184];

5

     document.body.innerHTML = 

6

       `<div>${tgt.population.toLocaleString()}</div>`;

7

     });

8

​

Go reset

Output

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.toLocaleString('en')} billion</td></tr>
</table>
`;
     });

Working with lists

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

6) Biggest Country in the World

Show the name of the country with the largest population.

Input

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

xxxxxxxxxx

 

1

fetch('/worldl.json')

2

  .then((r)=>r.json())

3

  .then((r)=>{

4

     let biggest = 0;

5

     for(let i = 0; i<r.length; i++){

6

       if (r[i].area > r[biggest].area){

7

         biggest = i;

8

       }

9

     }

10

     document.body.innerHTML = 

11

       `<div>${r[biggest].name}</div>`;

12

   });

13

​

Go reset

Output

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[biggest].population){
         biggest = i;
       }
     }
     document.body.innerHTML = 
       `<div>${r[biggest].name}</div>`;
   });

7) Total population

Show the total population of the world.

Input

1

 

1

​

Go reset

Output

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

8) Countries bigger than 1000000

Show list of countries with an area of more than 1 million square kilometers.

Input

1

 

1

​

Go reset

Output

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     document.body.innerHTML =
       r.filter(r=>r.area>1000000)
        .map(r=>`<div>${r.name}</div>`)
        .join('');
   });

9) Countries in Europe

Show list of countries where the continent is Europe.

Input

1

 

1

​

Go reset

Output

fetch('/worldl.json')
  .then((r)=>r.json())
  .then((r)=>{
     document.body.innerHTML =
       r.filter(r=>r.continent === 'Europe')
        .map(r=>`<div>${r.name}</div>`)
        .join('');
   });