Javascript 将JSON转换为HTML文档

因此，我有一个AJAX调用，它可以完美地工作，并以JSON的形式接收SharePoint列表项。我想将JSON对象填充到一个可打印的HTML文档中，但我不确定如何进行，因为我不想将其发布到一个表中，因为我不想让布局看起来像这样

下面是我的JS调用，以从列表中读取：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => r.json()) // parse JSON
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}

window.addEventListener("load", function () {
  Promise.all([
    loadData("WeeklyReport1", _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('WeeklyReport1')/items?$select=Team,WeekOf,OffensiveReport,DefensiveReport,SpecialTeamsReport"),
    loadData("WeeklyReport2", _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('WeeklyReport2')/items?$select=Team,WeekOf,OffensiveReport,DefensiveReport,SpecialTeamsReport"),
  ])
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});
</script>

基于上面的JSON，这是我想在HTML中放置它的方式，但我没有任何线索可以：

---

牛仔队（在队名下面划线）

攻击性报道

• 插入一些关于攻击性报告的内容

防御报告

• 插入一些关于防御性报告的内容

特别小组报告

• 插入有关特别小组报告的内容

如果有多个团队，请在此处插入下一个

重申我的问题。如何从这个loadData中提取这个对象，并按照上面演示的格式将其填充到HTML文档中

更新：我将我的JS更新为这个JS，因为它发布的内容太糟糕了

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function loadData(source, url) {
  return fetch(url, { headers: { accept: "application/json; odata=verbose" } }) // make request
    .then((r) => r.json()) // parse JSON
    .then((data) => data.d.results) // unwrap to get results array
    .then((results) => {
      results.forEach((r) => (r.source = source)); // add source to each item
      return results;
    });
}

window.addEventListener("load", function () {
  Promise.all([
    loadData("WeeklyReport1", _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('WeeklyReport1')/items?$select=Team,WeekOf,OffensiveReport,DefensiveReport,SpecialTeamsReport"),
    loadData("WeeklyReport2", _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('WeeklyReport2')/items?$select=Team,WeekOf,OffensiveReport,DefensiveReport,SpecialTeamsReport"),
  ])
  .then(([r1, r2]) => {
      const objItems = r1.concat(r2);
      var tableContent =
        '<table id="weekReport" style="width:100%"><thead><tr><td><strong>NFL Weekly Report</strong></td></tr>' +
        "<tr><td><strong>Team</strong></td></tr>" +
        "<tr><td><strong>Offensive Report</strong></td></tr>" +
        "<tr><td><strong>Defensive Report</strong></td></tr>" +
        "<tr><td><strong>Special Teams Report</strong></td></tr>" +
        "</thead><tbody>";

      for (var i = 0; i < objItems.length; i++) {
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].Team + "</td>";
        tableContent += "</tr>";
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].OffensiveReport + "</td>";
        tableContent += "</tr>";
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].DefensiveReport + "</td>";
        tableContent += "</tr>";
        tableContent += "<tr>";
        tableContent += "<td>" + objItems[i].SpecialTeamsReport + "</td>";
        tableContent += "<tr>";
        tableContent += "</tr>";
      }
      $("#reports").append(tableContent);
    })
    .catch((err) => {
      alert("Error: " + err);
      console.error(err);
    });
});
</script>
<div id="WeeklyReport">
   <table id='weekReport' style="width: 100%;">
     <tr>
       <td>
          <div id="reports" style="width: 100%"></div>
      </td>
    </tr>
 </table>
</div>

函数loadData（源、url）{
返回fetch（url，{headers:{accept:“application/json；odata=verbose”}}）//发出请求
.then（（r）=>r.json（））//解析json
.then（（data）=>data.d.results）//展开以获取结果数组
。然后（（结果）=>{
results.forEach（（r）=>（r.source=source））；//将source添加到每个项
返回结果；
});
}
addEventListener（“加载”，函数（）{
我保证([
loadData（“WeeklyReport1”，\u spPageContextInfo.webAbsoluteUrl+”/\u api/web/List/getbytitle（“WeeklyReport1”）/items？$select=Team、WeekOf、进攻性报告、防守性报告、特殊报告”），
loadData（“WeeklyReport2”，\u spPageContextInfo.webAbsoluteUrl+”/\u api/web/List/getbytitle（“WeeklyReport2”）/items？$select=Team、WeekOf、进攻性报告、防守性报告、特别报告”），
])
.然后（[r1，r2]）=>{
const objItems=r1.concat（r2）；
var表格内容=
“NFL每周报道”+
“团队”+
“攻击性报告”+
“防御性报告”+
“特别小组报告”+
"";
对于（var i=0；i{
警报（“错误：+err”）；
控制台错误（err）；
});
});

结果是这样的：

---

这是一个非常开放的问题。由于这可以有效地使用HTML为某些数据布局模板，因此可以使用以下模板语言：

将Mustache.js添加到您的页面，添加我们将呈现到的

#target

元素，并创建一个函数将模板呈现为HTML：

/*
*将JSON数据写入Mustache模板，然后
*将生成的HTML呈现给#目标元素。
*/
函数renderData（数据）{
fetch（'template.mustache'）
.then（response=>response.text（））
。然后（模板=>{
const rendered=Mustache.render（模板、数据）；
document.getElementById（'target'）.innerHTML=rendered；
});
}

---

下面的回答是一个很好的、超级通用的使用小胡子的回答。我喜欢使用它，这不是一个通用的解决方案，但（大部分）是有效的。将其作为数据源非常容易，而且大多数默认设置都非常合理。像这样：

$(document).ready(function() {
$('#example').DataTable( {
    "ajax": r.json()
} );

---

}）

使用模板；js模板字符串文字或带有内容占位符的模板标记，您可以替换为（）。@dandavis您是否介意提供更多解释，我查找了它，并没有完全遵循有用的示例。我的建议基本上是使用本机模板而不是胡须，但这两种方法都是足够的解决方案。是的，直到我发布了我的答案后，我才看到您的评论@dandavis（或OP的编辑），但您的本机解决方案看起来也很有效！“我还没有考虑过使用模板字符串。”詹姆斯在做了一些研究后对胡子很感兴趣。虽然，我不能让它像我想要的那样工作。创建JSFIDLE现在我知道如何使用DataTables，我没有包括它，因为正如我在OP中提到的，我不希望格式与表类似。这就是为什么我说的是HTML文档，而不是HTML表格。

$(document).ready(function() {
$('#example').DataTable( {
    "ajax": r.json()
} );