Question

我有这个JSON文件：

RX

我想把每个俱乐部的数据（名称，来源，锦标赛）放在一个单独的div中。我正试图用ES6做到这一点。这是我现在的代码：

{
 "clubs":  [
{
  "name": "Feyenoord Rotterdam",
  "origin": "Zuid-Holland",
  "championships": "15"

},

{
  "name": "Sparta Rotterdam",
  "origin": "Zuid-Holland",
  "championships": "6"
},

{
  "name": "AZ Alkmaar",
  "origin": "Noord-Holland",
  "championships": "2"
},

{
  "name": "Willem II",
  "origin": "Noord-Brabant",
  "championships": "3"
},

{
  "name": "PSV Eindhoven",
  "origin": "Noord-Brabant",
  "championships": "24"

}
]
}

现在的问题是我有5个不同的div与类“club-info”，但是所有数据都会转到第一个div，如图所示。

image problem

Answer 1

当你这样做时

document.querySelector(`.club-info`).appendChild($club);
document.querySelector(`.club-info`).appendChild($origin);
document.querySelector(`.club-info`).appendChild($championships);

，每次都会查找第一个.club-info元素。它不知道您想要使用也存储在$div中的元素。

由于$div包含您当前的.club-info元素，您可以改为使用该变量：

$div.appendChild($club);
$div.appendChild($origin);
$div.appendChild($championships);

（ES6）从JSON到HTML（div）的数据

1 个答案: