Ik heb een array met een lijst met elementen en ik probeer deze lijst toe te voegen aan een HTML-element met behulp van sjabloonreeksen:
var description = [
'HTML & CSS',
'Javascript object-oriented programming',
'Progressive Web apps (PWAs)',
'Website Performance Optimization',
'Webpack and Gulp workflows',
'Fullstack React.js',
'Web Components',
'Responsive web design',
'Sketch design',
'GraphQL and Relay'
]
$('body').append(
`
<div class="description">
<ul>
${description.map(
function(work) {
return `<li>${work}</li>`
}
)}</ul>
</div>
`
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Antwoord 1, autoriteit 100%
Uitleg
sjabloonliteralengebruiken de toString()methode die standaard de geretourneerde array door mapverbindt met een ,.
Om dit “probleem” te voorkomen, kunt u join('')
. gebruiken
Code
var description = [
'HTML & CSS',
'Javascript object-oriented programming',
'Progressive Web apps (PWAs)',
'Website Performance Optimization',
'Webpack and Gulp workflows',
'Fullstack React.js',
'Web Components',
'Responsive web design',
'Sketch design',
'GraphQL and Relay'
]
$('body').append(
`
<div class="description">
<ul>
${
description.map(function(work) {
return `<li>${work}</li>`
}).join('')
}
</ul>
</div>
`
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Antwoord 2, autoriteit 14%
.map()retourneert een array. U wilt waarschijnlijk een tekenreeksretourneren die de array-elementen aaneengeschakeld bevat. Dat kan met .join(''):
var description = [
'HTML & CSS',
'Javascript object-oriented programming',
'Progressive Web apps (PWAs)',
'Website Performance Optimization',
'Webpack and Gulp workflows',
'Fullstack React.js',
'Web Components',
'Responsive web design',
'Sketch design',
'GraphQL and Relay'
]
$('body').append(
`
<div class="description">
<ul>
${description.map(
function(work) {
return `<li>${work}</li>`
}
).join('') /* added .join('') here */}</ul>
</div>
`
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>Antwoord 3, autoriteit 2%
Zoals anderen hebben opgemerkt (wat ik voor de volledigheid ga herhalen), Array.prototype.mapretourneert een nieuwe array die de elementen bevat die zijn gewijzigd in de functie die eraan wordt doorgegeven.
Als je een array samenvoegt met een string (wat hier gebeurt), wordt de array ook geconverteerd naar een string. En wanneer een array wordt geconverteerd naar een string, wordt deze automatisch samengevoegd met komma’s.
const arr = ['<a>', '<b>'];
console.log(arr + ""); // <a>,<b>Antwoord 4
Voor een eenvoudige code gebruik ik deze als volgt:
${description.map((work) => <li>${work}</li>).join(”)}