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

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

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

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