div rond .map

Status
Niet open voor verdere reacties.

zuidemasanne

Nieuwe gebruiker
Lid geworden
7 okt 2015
Berichten
1
Graag wil ik een div plaatsen rond een artikel.
nu toont hij het onderstaande als platte tekst, maar ik wil graag ieder item kunnen opmaken.

<div>bord</div>,<div>lepel</div>,<div>mes</div>,<div>vork</div>
<div>bank</div>,<div>stoel</div>,<div>tafel</div>


Code:
function populateSomeData() {
				db.labels.where('status').equals(0).toArray().then(function(labels) {
					// For each label, resolve its articles:
					Dexie.Promise.all (labels.map(function (label) {
						return db.artikelen.where('label_id').anyOf(label.name).toArray();
					})).then(function(labelArticles) {
						for (var i=0; i<labels.length; ++i) {
							var label = labels[i],
								artikelen = labelArticles[i];
							
							//log (label.name);
							
							var div = document.createElement('div');
							div.className = "label";
							
							
							div.textContent = artikelen.map(function(a){return "<div>" + a.name + "</div>";});
							document.getElementById('log').appendChild(div);
							//log (artikelen.map(function(a){return a.name ;}).join(' '));
							//log (label.name +  artikelen.map(function(a){return "< div>" + a.name "</div>";}).join(', '));
						}
					});
				});
			}
 
Je voegt je html string nu expliciet toe als tekst binnen je div. Het zal dus ook als tekst door de browser gezien worden. 2 oplossingen:

1. Quick-n-Dirty
ipv div.[url="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent]textContent[/url] op te vullen, kan je div.[url="https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML]innerHTML[/url] invullen

2. De 'correcte' manier
Ipv je html als tekst op te bouwen, zou je voor elke onderliggende div ook een createElement moeten uitvoeren en die dan aan de parent attachen. Om een functie op elk element van een array uit te voeren, kan je in dit geval Array.forEach gebruiken ipv Array.map
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan