如何在 HTML 页面上显示来自 API 响应的 HTML 内容？答案

【问题标题】：How to display HTML content from API response on HTML page?如何在 HTML 页面上显示来自 API 响应的 HTML 内容？
【发布时间】：2022-02-11 14:54:23
【问题描述】：

我向 API 发送了一个获取请求，该 API 响应：

<Game Gameid="12345">
    <name primary="true">Apple</name>           
    <year>2011</year>
</Game>

只是想知道如何在我的 HTML 页面上显示这些数据。我假设我需要用 javascript 或其他东西来处理它。

这是我当前的 javascript：

fetch(url)
  .then((response) => {
    
      return response.json();
  })
  .then(data => {
    console.log(data);
  })

只想将名称和年份显示在 Div 或其他内容中

【问题讨论】：

是的，你应该处理它。只是响应不包含 JSON，而是 XML
api响应数据是json还是text？
我相信响应是 XML

标签： javascript html

【解决方案1】：

这是一个小脚本，演示如何从 XML 字符串中提取数据：

const xml=`<Game Gameid="12345">
    <name primary="true">Apple</name>           
    <year>2011</year>
</Game>`;

const dom=(new DOMParser()).parseFromString(xml,"text/xml");
const game=dom.querySelector("*");
// console.log(game.tagName,game.getAttribute("Gameid"));
const data = [...game.children].reduce((a,t)=>(a[t.tagName]=t.textContent,a), {});

document.querySelector("div").textContent=`The name is ${data.name} and the year is ${data.year}.`;

&lt;div&gt;&lt;/div&gt;

【讨论】：