View source for DOM content from lists

<pre id='shellbody' data-qtp='fetch'></pre>
<div class=qu>
beatles.json
 {"members":
  [
    {"firstName":"Paul","lastName":"McCartney"},
    {"firstName":"John","lastName":"Lennon"},
    {"firstName":"Ringo","lastName":"Starr"},
    {"firstName":"George","lastName":"Harrison"}
  ]
 }

== Show a list of numbers ==
*When you have data in a list you can use a for loop to generate content
<pre class=usr>
fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    for(let beatle of r.members){
      let div = document.createElement('div');
      div.innerHTML = beatle.firstName;
      document.body.append(div);
    }
  });

</pre>
<pre class=ans>
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);
    }
  });

</pre>
</div>