JavaScript Array.map() 将逗号附加到 DOM

Question

我试图从这里呈现一些彩票结果。我得到的所有数据都很好，但想要结合 win_numbers、mega_ball 和乘数值来呈现到页面，如下所示：

相反，我得到的是数字，但逗号也呈现给 DOM，如下所示：

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>
    `)
  })

})

在控制台中，数组看起来很好。但是当它在 DOM 中呈现时，每个 ...

任何帮助和反馈将不胜感激。

这是一个 JSFiddle 链接以防万一。JSFiddle

Answer 1

只需显式地加入它们，而不是依赖于默认Array::toString方法。

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