Javascript 从JSON API请求中获取值，并将其显示为网页中的文本

我觉得这是一个非常简单的问题，但我找不到我需要的帮助，所以我向你求助

如果您转到此请求URL： ，您将看到一个非常基本的JSON响应，其中包含两个键及其各自的值：

{"trees":383,"carbonOffset":12.52}

我想在HTML页面的一个段落中添加树木编号，在另一个段落中添加碳补偿，如下所示：

<p class="trees">383</p>
<p class="carbonoffset">12.52</p>

383
12.52

---

提前感谢您的帮助

html不支持这种开箱即用的东西。您需要：

从API获取数据

解析数据

更新html

---

一般来说，我建议使用vuejs这样的框架来实现这一点，但您也可以使用javascript并编辑

p

元素的

innerHtml

。

您可以使用

var JSON=JSON.parse（response.body）

将响应体解析为JSON对象。之后，您可以分别使用

JSON.trees

和

JSON.carbonOffset

访问JSON的属性。

---

然后使用

document.querySelector（'.trees'）.innerHTML（json.trees）

和

document.querySelector（'.carbonoffset'）.innerHTML（json.carbonoffset）

首先需要获取结果。您可以使用本机进行此操作

然后，当接收到json数据时，您需要找到html元素，这里我们循环键，然后使用

document.getElementsByClassName（键）

查询其类与接收到的json键匹配的元素。找到元素后，我们使用

elem[0].textContent=json[key]

输入相应的值

fetch("https://public.ecologi.com/users/lightlysalted/impact")
.then((res) => res.json())
.then((json) => {
  Object.keys(json).forEach((key) => {
    const elem = document.getElementsByClassName(key);
    elem[0].textContent = json[key];
  });
})

小提琴：