How to remove unwanted comma (,) from insertAdjacentHTML object?

January 26, 2023

I saved project list data in an array and Im mapping over this array to display the list in the UI, I using .insertAdjacentHTML(), and the project list coming fine in UI except Im getting an unwanted comma , between each project list items in the UI.

How to remove this , from UI ?

const projectHTML = projectDataArray.map((el) => { //projectDataArray is project list array
    return `<div class="row">${el.title}</div>`
}  
document.querySelector(".work_wrapper").insertAdjacentHTML("afterbegin", projectHTML);

Here is the comma coming between each .row:-

>Solution :

You can use the .join() method to remove the unwanted commas between each project list item. The join() method is used to join all elements of an array into a string.

const projectHTML = projectDataArray.map((el) => { 
    return `<div class="row">${el.title}</div>`
}).join('');
document.querySelector(".work_wrapper").insertAdjacentHTML("afterbegin", projectHTML);