JavaScript Array.map() appends commas to the DOM

Question

I'm attempting to render a few lottery results from here . I am getting all the data just fine, but want to combine the winning_numbers, mega_ball, and multiplier values to render to the page like this:

Instead what I am getting is the numbers but with commas rendered to the DOM as well like this shows:

const url = 'https://data.ny.gov/resource/h6w8-42p9.json';

$.get(url, (data) => {
// Deconstruct Array Data
[latest, one, two, three] = data;

const pastResults = [one, two, three]

// Removed A Block of CODE for StackOverflow dealing with latest result since it works fine.

pastResults.map(num => {

  const numsArray = num.winning_numbers.split(" ");
  numsArray.push(num.mega_ball);
  numsArray.push("x" + num.multiplier.split("")[1]);
  console.log(numsArray);

  pastResultsBlock.append(`
    <div class="col-12">
      <div class="animated flipInY past-result-item box-shadow">
        <div class="past-result-date">${moment(num.draw_date).format("MMM Do")}</div>
        <div class="past-result-numbers">
          ${numsArray.map(number => `<span>${number}</span>`)}
        </div>
      </div>
    </div>
    `)
  })

})

In the console the array looks just fine. but when it renders in the DOM there is a "," comma after every ...

Any help and feedback would be greatly appreciated.

Here is a JSFiddle link just in case. JSFiddle

Answer 1

Simply join them explicitly instead of relying on the default Array::toString method.

// Change
`...${numsArray.map(number => `<span>${number}</span>`)}...`
// to
`...${numsArray.map(number => `<span>${number}</span>`).join("")}...`