DOM content from lists: Difference between revisions

From ProgZoo
Jump to navigation Jump to search
← Older edit
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
<pre id='shellbody' data-qtp='fetch'></pre>
<pre id='shellbody' data-qtp='fetch'></pre>
<div class=qu>
beatles.json
beatles.json
  {"members":
  {"members":
Line 27: Line 26:


== Using a for loop ==
== Using a for loop ==
<div class=qu>
*When you have data in a list you can use a for loop to generate content
*When you have data in a list you can use a for loop to generate content
<pre class=usr>
<pre class=usr>
Line 88: Line 88:
*We use <code>map</code> to create <code>lst</code>
*We use <code>map</code> to create <code>lst</code>
*Each element of <code>lst</code> must be added to the document body.
*Each element of <code>lst</code> 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 [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax spread syntax].
*If you don't want to add each of the 13 albums by hand you'll have to find out how to use [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax spread syntax].
<pre class=usr>
<pre class=usr>
fetch('/beatles.json')
fetch('/beatles.json')
   .then((r)=>r.json())
   .then((r)=>r.json())
   .then((r)=>{
   .then((r)=>{
     let lst  = r.albums.forEach(a => {
     let lst  = r.albums.map(a => {
       let div = document.createElement('div');
       let div = document.createElement('div');
       div.innerHTML = `${a.title}, ${a.year}`;
       div.innerHTML = `${a.title}, ${a.year}`;
Line 114: Line 114:
</pre>
</pre>
</div>
</div>


== Create a drop down list ==
== Create a drop down list ==
Line 124: Line 123:
   &lt;option>Three&lt;/option>
   &lt;option>Three&lt;/option>
  &lt;/select>
  &lt;/select>
<div class=imper>Create a drop down list for every Album. Show the year</div>
<div class=imper>Create a drop down list for every Album. Show the year only</div>
<pre class=usr>
<pre class=usr>
fetch('/beatles.json')
fetch('/beatles.json')
Line 130: Line 129:
   .then((r)=>{
   .then((r)=>{
     let s = document.createElement('ul');
     let s = document.createElement('ul');
     s.append(...r.albums.map(a => {
     for(let a of r.album){
       let o = document.createElement('li');
       let o = document.createElement('li');
       o.innerHTML = `${a.title}`;
       o.innerHTML = a.title;
       return o
       s.append(o);
     }));
     }
     document.body.append(s);
     document.body.append(s);
   });
   });
Line 146: Line 145:
       let o = document.createElement('option');
       let o = document.createElement('option');
       o.innerHTML = `${a.year}`;
       o.innerHTML = `${a.year}`;
      return o
    }));
    document.body.append(s);
  });
</pre>
</div>
== Create a drop down list of unique years ==
<div class=qu>
You can convert an [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array Array] to a [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set Set] then back again. That will remove duplicates.
<div class=imper>Create a drop down list for every Album. Show each year once only</div>
<pre class=usr>
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);
  });
</pre>
<pre class=ans>
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
       return o
     }));
     }));

Latest revision as of 19:03, 4 September 2021



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

 
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

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


Input

 
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

 
Output
fetch('/beatles.json')
  .then((r)=>r.json())
  .then((r)=>{
    let s = document.createElement('ul');
    for(let a of r.album){
      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);
  });





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

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



Served by: dill at 2025-11-04T13:11

Retrieved from "https://progzoo.net/index.php?title=DOM_content_from_lists&oldid=588"

		
	






	
Navigation menu