Javascript 获取JSON响应并在HTML元素中显示

我试图获取JSON响应，并将它们显示在预设的HTML元素中。我使用的是graphql（由datocms提供）

API资源管理器为我的模型显示：

query MyQuery {
  allNews {
    id
    newsTitle
    newsExcerpt
    newsContent
    newsCategory
  }
}

返回：

{
  "data": {
    "allNews": [
      {
        "id": "21003677",
        "newsTitle": "The amazing news",
        "newsExcerpt": "The amazing news to waste your afternoon.",
        "newsContent": "\nThe amazing news is unlike other news to waste your afternoon. It indeed wastes your afternoon in a way unimaginable, never before achieved.\n\nThe News consist of fake news and Trumpian staple conspiracies. ",
        "newsCategory": "News"
      }
    ]
  }
}

提取：

const token = 'the_token_here';
fetch(
  'https://graphql.datocms.com/',
  {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json',
      'Authorization': `Bearer ${token}`,
    },
    body: JSON.stringify({
      query: '{ allNews { newsTitle } }'
    }),
  }
)
.then(res => res.json())
.then((res) => {
  console.log(res.data)
})
.catch((error) => {
  console.log(error);
});

加载静态HTML页面时，我希望在HTML预设元素中显示JSON响应：

<h4 class="news--title">$(newsTitle.name)</h4>
<div class="news--description">${newsContent.name}</div>

$（newsttitle.name）
${newcontent.name}

是否可以使用香草javascript，以及如何使用

另外，如果响应不止一个（比如说，10个响应），并且我有四个这样的元素组，那么四个JSON响应（基于四个最大的ID号）是否可以迭代到四个HTML元素，以及如何迭代

---

抱歉，如果问题是哑的，或者在其他地方被问到并回答了。我开始学习javascript，以前从未使用过API调用/JSON。

您正在寻找模板文本。您可以有如下文本：

var myText = `This is a trivially simple template literal`;

function myTemplate(titleName, titleContent) {
    return `
        <h4 class="news--title">${titleName}</h4>
        <div class="news--description">${titleContent}</div>
    `;
}

var items = [
    {titleName: 'a', titleContent: 'b'},
    {titleName: 'c', titcleContent: 'd'},
    //...
];
var myTemplates = [];
for (let item of items) myTemplates.push(myTemplate[item.titleName, item.titleContent]);
myContainer.innerHTML = myTemplates.join("");

或者这个：

var myParam = "great";
var myText2 = `I have a ${myParam} day!`;

这将评估为“我有一个伟大的一天！”

现在，如果要创建模板，可以按如下方式进行：

var myText = `This is a trivially simple template literal`;

function myTemplate(titleName, titleContent) {
    return `
        <h4 class="news--title">${titleName}</h4>
        <div class="news--description">${titleContent}</div>
    `;
}

var items = [
    {titleName: 'a', titleContent: 'b'},
    {titleName: 'c', titcleContent: 'd'},
    //...
];
var myTemplates = [];
for (let item of items) myTemplates.push(myTemplate[item.titleName, item.titleContent]);
myContainer.innerHTML = myTemplates.join("");

使用vanilla JS也可以通过请求获取JSON，您可以从大量的源代码中读取。例如：

您甚至可以实现一些东西来帮助您发送请求，而不是处理Javascript的普通支持，例如：

function sendRequest(type, url, callback, async, params) {
    if (async !== false) async = true;
    var xhttp = new XMLHttpRequest();
    console.log(callback);
    xhttp.onreadystatechange = callback;
    xhttp.open(type, url, async);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send(params);
}

---

我不太明白您的问题，但如果您只是想设置元素的内容，请尝试以下方法：

//这里还有其他代码
const exampleData={title:“Hello”，content:“这是内容”}；
document.querySelector（“.news--title”）.innerHTML=exampleData.title；
document.querySelector（“.news--description”）.innerHTML=exampleData.content

我应该怎么做才能将res.JSON中的JSON响应转换成这个？-->const exampleData={title:“Hello”，content:“这是内容”}；获取JSON响应的要点是，我可以自动将响应用于HTML元素。我仍然不太理解它，如果我是正确的，请将
exampleData
替换为
innerHTML
分配给数据所在的对象。