How can I do this same functionality to es6? I'm trying to add this text to the list item
var names = [ "Jon", "Nick", "Bill", "Tom" ];
$('#names-list li').each(function (index) {
$(this).text(names[index]);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="names-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>ES6 seems unrelated to what you're asking.
The gist of your question seems to be 'how do I achieve this without jQuery?'. In which case the equivalent would be to use querySelectorAll() to get the li elements, forEach() to loop over them and then set the textContent, like this:
var names = ["Jon", "Nick", "Bill", "Tom"];
document.querySelectorAll('#names-list li').forEach(function(li, index) {
li.textContent = names[index];
});<ul id="names-list">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
querySelectorAll are not really connected.
text() method is more like setting textContent rather than innerText which will trigger a reflow and some other bad things.If you're looking for 100% ES6, here you go:
const names = ["Jon", "Nick", "Bill", "Tom"];
const namesList = document.querySelectorAll("#names-list li");
for (let i in namesList) {
namesList[i].innerText = names[i];
};
But I wouldn't really write the code like this if I were given any coding style.
