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}]
}

Using a for loop

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

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

Using forEach

• An alternative is the forEach method

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

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 albums by hand you'll have to find out how to use spread syntax.

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

Create a drop down list of Beatles

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 containing each Beatle.

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    let s = document.createElement('select');
    for(let a of r.albums){
      let o = document.createElement('option');
      o.innerHTML = a.title;
      s.append(o);
    }
    document.body.append(s);
  });

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

Create a drop down list of years

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

fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    let s = document.createElement('ul');
    for(let a of r.albums){
      let o = document.createElement('li');
      o.innerHTML = a.title;
      s.append(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);
  });

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

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

Make the drop down do something

When the user selects a year from the drop down, show a list of albums for that year.

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('select');
    s.append(...ls.map(a => {
      let o = document.createElement('option');
      o.innerHTML = a;
      return o
    }));
    let ul = document.createElement('ul');
    document.body.append(s, ul);
    s.onchange = ()=>{
      ul.innerHTML = '';
      let li = document.createElement('li');
      li.innerHTML = 'this is where the ablum titles go';
      ul.append(li);
    }
  });

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('select');
    s.append(...ls.map(a => {
      let o = document.createElement('option');
      o.innerHTML = a;
      return o
    }));
    let ul = document.createElement('ul');
    document.body.append(s,ul);
    s.onchange = () => {
      let year = parseInt(s.value);
      let albums = r.albums.filter(a=>a.year===year);
      ul.innerHTML = '';
      ul.append(...albums.map(a=>{
        let li = document.createElement('li');
        li.innerHTML = a.title;
        return li;
      }));
    }
  });