DOM content from lists

beatles.json

{"members":
 [
   {"firstName":"Paul","lastName":"McCartney"},
   {"firstName":"John","lastName":"Lennon"},
   {"firstName":"Ringo","lastName":"Starr"},
   {"firstName":"George","lastName":"Harrison"}
 ],
 "albums":
 [
   {"title":"Please Please Me", "year":1963},
   {"title":"With the Beatles","year":1963},
   {"title":"A Hard Day's Night","year":1964},
   {"title":"Beatles for Sale","year":1964},
   {"title":"Help!","year":1965},
   {"title":"Rubber Soul","year":1965},
   {"title":"Revolver","year":1966},
   {"title":"Sgt. Pepper's Lonely Hearts Club Band","year":1967},
   {"title":"Magical Mystery Tour","year":1967},
   {"title":"White Album","year":1968},
   {"title":"Yellow Submarine","year":1969},
   {"title":"Abbey Road","year":1969},
   {"title":"Let It Be","year":1970}]
}

1) Using a for loop

• When you have data in a list you can use a for loop to generate content

Input

fetch('/beatles.json') .then((r)=>r.json()) .then((r)=>{ for(let b of r.members){ let div = document.createElement('div'); div.innerHTML = `${b.lastName}, ${b.firstName}`; document.body.append(div); } });

xxxxxxxxxx

 

1

fetch('/beatles.json')

2

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

3

  .then((r)=>{

4

    for(let b of r.members){

5

      let div = document.createElement('div');

6

      div.innerHTML = `${b.lastName}, ${b.firstName}`;

7

      document.body.append(div);

8

    }

9

  });

10

​

11

​

Go reset

Output

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    for(let b of r.members){
      let div = document.createElement('div');
      div.innerHTML = `${b.lastName}, ${b.firstName}`;
      document.body.append(div);
    }
  });

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    for(let beatle of r.members){
      let div = document.createElement('div');
      div.innerHTML = `${beatle.firstName} ${beatle.lastName}`;
      document.body.append(div);
    }
  });

2) Using forEach

• An alternative is the forEach method

Input

fetch('/beatles.json') .then((r)=>r.json()) .then((r)=>{ r.members.forEach(b => { let div = document.createElement('div'); div.innerHTML = `${b.lastName}, ${b.firstName}`; document.body.append(div); }) });

xxxxxxxxxx

 

1

fetch('/beatles.json')

2

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

3

  .then((r)=>{

4

    r.members.forEach(b => {

5

      let div = document.createElement('div');

6

      div.innerHTML = `${b.lastName}, ${b.firstName}`;

7

      document.body.append(div);

8

    })

9

  });

10

​

11

​

Go reset

Output

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    r.members.forEach(b => {
      let div = document.createElement('div');
      div.innerHTML = `${b.lastName}, ${b.firstName}`;
      document.body.append(div);
    })
  });

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    r.members.forEach(b => {
      let div = document.createElement('div');
      div.innerHTML = `${b.firstName} ${b.lastName}`;
      document.body.append(div);
    })
  });

3) Using map

r.albums is a list, each entry includes a title and year

• We use map to create lst
• Each element of lst must be added to the document body.
• If you don't want to add each of the 13 items by hand you'll have to find out how to use spread syntax.

Input

fetch('/beatles.json') .then((r)=>r.json()) .then((r)=>{ let lst = r.albums.map(a => { let div = document.createElement('div'); div.innerHTML = `${a.title}, ${a.year}`; return div }); document.body.append(lst[0],lst[1],lst[2]); });

xxxxxxxxxx

 

1

fetch('/beatles.json')

2

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

3

  .then((r)=>{

4

    let lst  = r.albums.map(a => {

5

      let div = document.createElement('div');

6

      div.innerHTML = `${a.title}, ${a.year}`;

7

      return div

8

    });

9

    document.body.append(lst[0],lst[1],lst[2]);

10

  });

11

​

12

​

Go reset

Output

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    let lst  = r.albums.map(a => {
      let div = document.createElement('div');
      div.innerHTML = `${a.title}, ${a.year}`;
      return div
    });
    document.body.append(lst[0],lst[1],lst[2]);
  });

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    document.body.append(... r.albums.map(b => {
      let div = document.createElement('div');
      div.innerHTML = `${b.title}, ${b.year}`;
      return div
    }));
  });

4) Create a drop down list

In HTML you can create a drop down list like this:

<select>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

Create a drop down list for every Album. Show the year only

Input

fetch('/beatles.json') .then((r)=>r.json()) .then((r)=>{ let s = document.createElement('ul'); s.append(...r.albums.map(a => { let o = document.createElement('li'); o.innerHTML = `${a.title}`; return o })); document.body.append(s); });

xxxxxxxxxx

 

1

fetch('/beatles.json')

2

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

3

  .then((r)=>{

4

    let s = document.createElement('ul');

5

    s.append(...r.albums.map(a => {

6

      let o = document.createElement('li');

7

      o.innerHTML = `${a.title}`;

8

      return o

9

    }));

10

    document.body.append(s);

11

  });

12

​

Go reset

Output

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    let s = document.createElement('ul');
    s.append(...r.albums.map(a => {
      let o = document.createElement('li');
      o.innerHTML = `${a.title}`;
      return o
    }));
    document.body.append(s);
  });

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    let s = document.createElement('select');
    s.append(...r.albums.map(a => {
      let o = document.createElement('option');
      o.innerHTML = `${a.year}`;
      return o
    }));
    document.body.append(s);
  });

5) Create a drop down list of unique years

You can convert an Array to a Set then back again. That will remove duplicates.

Create a drop down list for every Album. Show each year once only

Input

fetch('/beatles.json') .then((r)=>r.json()) .then((r)=>{ let ls = Array.from(new Set(r.albums.map(r=>r.year))); let s = document.createElement('ul'); s.append(...ls.map(a => { let o = document.createElement('li'); o.innerHTML = a; return o })); document.body.append(s); });

xxxxxxxxxx

 

1

fetch('/beatles.json')

2

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

3

  .then((r)=>{

4

    let ls = Array.from(new Set(r.albums.map(r=>r.year)));

5

    let s = document.createElement('ul');

6

    s.append(...ls.map(a => {

7

      let o = document.createElement('li');

8

      o.innerHTML = a;

9

      return o

10

    }));

11

    document.body.append(s);

12

  });

13

​

Go reset

Output

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    let ls = Array.from(new Set(r.albums.map(r=>r.year)));
    let s = document.createElement('ul');
    s.append(...ls.map(a => {
      let o = document.createElement('li');
      o.innerHTML = a;
      return o
    }));
    document.body.append(s);
  });

fetch('/beatles.json')
  .then(r=>r.json())
  .then(r=>{
    let lst = new Set(r.albums.map(a=>`${a.year}`));
    lst = Array.from(lst);
    let s = document.createElement('select');
    s.append(...lst.map(a => {
      let o = document.createElement('option');
      o.innerHTML = a;
      return o
    }));
    document.body.append(s);
  });