DOM Content from lists - Revision history

Andr3w: /* Create a drop down list of Beatles */

2022-01-17T17:16:19Z

Create a drop down list of Beatles

← Older revision		Revision as of 17:16, 17 January 2022
Line 142:		Line 142:
	.then((r)=>{		.then((r)=>{
	let s = document.createElement('select');		let s = document.createElement('select');
	s.append(...r.~~beatles~~.map(a => {		s.append(...r.members.map(a => {
	let o = document.createElement('option');		let o = document.createElement('option');
	o.innerHTML = `${a.lastName}`;		o.innerHTML = `${a.lastName}`;

Andr3w: /* Create a drop down list of Beatles */

2022-01-17T17:15:38Z

Create a drop down list of Beatles

← Older revision		Revision as of 17:15, 17 January 2022
Line 142:		Line 142:
	.then((r)=>{		.then((r)=>{
	let s = document.createElement('select');		let s = document.createElement('select');
	s.append(...r.~~albums~~.map(a => {		s.append(...r.beatles.map(a => {
	let o = document.createElement('option');		let o = document.createElement('option');
	o.innerHTML = `${a.~~title~~}`;		o.innerHTML = `${a.lastName}`;
	return o		return o
	}));		}));

Andr3w: /* Create a drop down list of Beatles */

2022-01-17T17:15:01Z

Create a drop down list of Beatles

← Older revision		Revision as of 17:15, 17 January 2022
Line 123:		Line 123:
	<option>Three</option>		<option>Three</option>
	</select>		</select>
	<div class=imper>Create a drop down list ~~for every~~ Beatle.</div>		<div class=imper>Create a drop down list containing each Beatle.</div>
	<pre class=usr>		<pre class=usr>
	fetch('/beatles.json')		fetch('/beatles.json')
Line 129:		Line 129:
	.then((r)=>{		.then((r)=>{
	let s = document.createElement('select');		let s = document.createElement('select');
	for(let a of r.~~album~~){		for(let a of r.albums){
	let o = document.createElement('option');		let o = document.createElement('option');
	o.innerHTML = a.title;		o.innerHTML = a.title;

Andr3w: /* Create a drop down list */

2022-01-17T17:14:25Z

Create a drop down list

@@ Line 115: / Line 115: @@
 </div>
-== Create a drop down list ==
+== Create a drop down list of Beatles ==
 <div class=qu>
 In HTML you can create a drop down list like this:
@@ Line 123: / Line 123: @@
     &lt;option>Three&lt;/option>
   &lt;/select>
 <div class=imper>Create a drop down list for every Album. Show the year only</div>
 <pre class=usr>

Andr3w: /* Make the drop down do something */

2022-01-17T17:05:39Z

Make the drop down do something

← Older revision		Revision as of 17:05, 17 January 2022
Line 202:		Line 202:
	return o		return o
	}));		}));
	~~document.body.append(s);~~
	let ul = document.createElement('ul');		let ul = document.createElement('ul');
			document.body.append(s, ul);
	s.onchange = ()=>{		s.onchange = ()=>{
	ul.innerHTML = '';		ul.innerHTML = '';

Andr3w: /* Make the drop down do something */

2022-01-17T17:05:02Z

Make the drop down do something

← Older revision		Revision as of 17:05, 17 January 2022
Line 190:		Line 190:
	== Make the drop down do something ==		== Make the drop down do something ==
	<div class=qu>		<div class=qu>
	<div class=imper>~~Create~~ a drop down list for ~~every Album~~. ~~Show each year once only~~</div>		<div class=imper>When the user selects a year from the drop down, show a list of albums for that year.</div>
	<pre class=usr>		<pre class=usr>
	fetch('/beatles.json')		fetch('/beatles.json')
Line 203:		Line 203:
	}));		}));
	document.body.append(s);		document.body.append(s);
			let ul = document.createElement('ul');
			s.onchange = ()=>{
			ul.innerHTML = '';
			let li = document.createElement('li');
			li.innerHTML = 'this is where the ablum titles go';
			ul.append(li);
			}
	});		});
	</pre>		</pre>
	<pre class=ans>		<pre class=ans>
	fetch('/beatles.json')		fetch('/beatles.json')
	.then(r=>r.json())		.then((r)=>r.json())
	.then(r=>{		.then((r)=>{
	let ~~lst~~ = new Set(r.albums.map(a=>~~`${a~~.year}`));		let ls = Array.from(new Set(r.albums.map(r=>r.year)));
	~~lst = Array.from(lst~~);
	let s = document.createElement('select');		let s = document.createElement('select');
	s.append(...~~lst~~.map(a => {		s.append(...ls.map(a => {
	let o = document.createElement('option');		let o = document.createElement('option');
	o.innerHTML = a;		o.innerHTML = a;
	return o		return o
	}));		}));
	document.body.append(s);		let ul = document.createElement('ul');
			document.body.append(s,ul);
	s.onchange = () => {		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;
			}));
	}		}
	});		});
	</pre>		</pre>
	</div>		</div>

Andr3w: /* Make the drop down do something */

2022-01-17T16:40:27Z

Make the drop down do something

← Older revision		Revision as of 16:40, 17 January 2022
Line 218:		Line 218:
	}));		}));
	document.body.append(s);		document.body.append(s);
			s.onchange = () => {
			}
	});		});
	</pre>		</pre>
	</div>		</div>

Andr3w: /* Create a drop down list of unique years */

2022-01-17T16:39:25Z

Create a drop down list of unique years

@@ Line 164: / Line 164: @@
      s.append(...ls.map(a => {
        let o = document.createElement('li');
        o.innerHTML = a;
        return o

Andr3w: /* Create a drop down list */

2021-09-12T09:12:43Z

Create a drop down list

← Older revision		Revision as of 09:12, 12 September 2021
Line 129:		Line 129:
	.then((r)=>{		.then((r)=>{
	let s = document.createElement('ul');		let s = document.createElement('ul');
	for(let a of r.~~album~~){		for(let a of r.albums){
	let o = document.createElement('li');		let o = document.createElement('li');
	o.innerHTML = a.title;		o.innerHTML = a.title;

Andr3w: Created page with "

beatles.json {"members": [ {"firstName":"Paul","lastName":"McCartney"}, {"firstName":"John","lastName":"Lennon"}, {"..."

2021-09-05T21:11:50Z

Created page with "<pre id='shellbody' data-qtp='fetch'></pre> beatles.json {"members": [ {"firstName":"Paul","lastName":"McCartney"}, {"firstName":"John","lastName":"Lennon"}, {"..."

New page

<pre id='shellbody' data-qtp='fetch'></pre>
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 ==
<div class=qu>
*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 b of r.members){
let div = document.createElement('div');
div.innerHTML = `${b.lastName}, ${b.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>

== Using forEach ==
<div class=qu>
*An alternative is the forEach method
<pre class=usr>
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);
})
});

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

</pre>
</div>

== Using map ==
<div class=qu>
<code>r.albums</code> is a list, each entry includes a <code>title</code> and <code>year</code>
*We use <code>map</code> to create <code>lst</code>
*Each element of <code>lst</code> 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 [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax spread syntax].
<pre class=usr>
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]);
});

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

== Create a drop down list ==
<div class=qu>
In HTML you can create a drop down list like this:
<select>
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
<div class=imper>Create a drop down list for every Album. Show the year only</div>
<pre class=usr>
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);
});
</pre>
<pre class=ans>
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);
});
</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
}));
document.body.append(s);
});
</pre>
</div>