I'm mapping over an array to display data in the browser using template literals.

With each rendered object, a ma shows up in the browser and also when I inspected the element. I did some reading and I think it is because I haven't joined the array, which I am trying to do but I am not understanding where to add it in the basic function I have.

Here is the code:

let synopsisRender = synopsisContent.map((item)=>{
    return`
    <div class="synopsis" key=${item.id}>
        <div class="synopsisHeader">
            <div class="cover">
                <img src="${item.poster}" alt="${item.altText}">
            </div>
            <div class="synopsisTitle">
                <h1>${item.title}</h1>
            </div>
        </div>
        <div class="synopsisText">
            <h2>${item.subTitle}</h2>
            <p>${item.synopsisText}</p>
        </div>
    </div>
    `
});

document.getElementById("synopsis").innerHTML = synopsisRender;

I'm mapping over an array to display data in the browser using template literals.

With each rendered object, a ma shows up in the browser and also when I inspected the element. I did some reading and I think it is because I haven't joined the array, which I am trying to do but I am not understanding where to add it in the basic function I have.

Here is the code:

let synopsisRender = synopsisContent.map((item)=>{
    return`
    <div class="synopsis" key=${item.id}>
        <div class="synopsisHeader">
            <div class="cover">
                <img src="${item.poster}" alt="${item.altText}">
            </div>
            <div class="synopsisTitle">
                <h1>${item.title}</h1>
            </div>
        </div>
        <div class="synopsisText">
            <h2>${item.subTitle}</h2>
            <p>${item.synopsisText}</p>
        </div>
    </div>
    `
});

document.getElementById("synopsis").innerHTML = synopsisRender;

• javascript

• 1 Chain join to map like so: }).join(''); or join when setting innerHTML like so: .innerHTML = synopsisRender.join(''); – ibrahim mahrir Commented Jul 11, 2020 at 17:32
• Do you want synopsisRender to be an array or a string? In case of the former, just use … = synopsisRender.join('') – Bergi Commented Jul 11, 2020 at 17:33

1 Answer 1

After mapping, but before assigning to innerHTML.

let synopsisRender = synopsisContent.map((item)=>{
    return`
    <div class="synopsis" key=${item.id}>
        <div class="synopsisHeader">
            <div class="cover">
                <img src="${item.poster}" alt="${item.altText}">
            </div>
            <div class="synopsisTitle">
                <h1>${item.title}</h1>
            </div>
        </div>
        <div class="synopsisText">
            <h2>${item.subTitle}</h2>
            <p>${item.synopsisText}</p>
        </div>
    </div>
    `
}).join(''); //Here...

document.getElementById("synopsis").innerHTML = synopsisRender; //...Or here, `synopsisRender.join('')`