Question

我需要使用JavaScript将本地JSON文件转换为HTML。我可以将数据从JSON加载到控制台，但不能加载到HTML页面。有人可以看看我的代码，然后告诉我我的错误在哪里吗？

这是我的代码：

const sejoursData = new XMLHttpRequest();
sejoursData.open('GET', './data.json');

sejoursData.onload = function()
{

console.log(sejoursData.responseText);

var loadData = JSON.parse(sejoursData.responseText);

function sejourTemplate(sejours){

  return `
  <div class="sejour">
  <img class="sejour-photo" src="${sejours.imageUrl}">
  <h2 class="sejour-titre">${sejoursData.titre}</h2>
  <span class="font">${sejours.description}</span>

  <h4 class="font">${sejours.theme}</h4>
  <P class="font">${sejours.dateDebut}</P>
  <P class="font">${sejours.dateFin}</P>
  <P class="font">${sejours.prix}</P>
  <P class="font">${sejours.promotion}</h4><br>
  <input type="button" value="Favorit" class="btn-primary" id="btn">
  </div>
  `
};

document.getElementById('app').innerHTML = `

<h1 class="app-title">Resultas pour le Sejours ( ${sejoursData.length} )</h1>
${sejoursData.map(sejourTemplate).join('')}
`
};
sejoursData.send();

Answer 1

如果您提供了console.log(sejoursData.responseText);的结果，那将有所帮助。
在这里

<h1 class="app-title">Resultas pour le Sejours ( ${sejoursData.length} )</h1>
${sejoursData.map(sejourTemplate).join('')}

您应该使用loadData，而不是sejoursData。 loadData是解析为对象的对象。

<h1 class="app-title">Resultats pour le Sejours ( ${loadData.length} )</h1>
${loadData.map(sejourTemplate).join('')}

无法将Json数据分发到HTML

1 个答案: