Javascript 如何将json数据转换为Html标记？

我试图在Html标记中显示JSON数据。但我得到了一个错误：

未捕获的（承诺中的）类型错误

异步函数fetchData（）{ const response=等待获取（'http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76'); const data=wait response.json（）； 控制台日志（数据）； document.getElementById（“显示”）.InsertAdjaceText=` ${data.articles.map（函数（文章）{ 返回`

• ${article.title}

• ${article.description}

• ${article.author}

` }).join（“”）}` } fetchData（）

---

当前，您正在将HTML实体作为文本插入，这将不起作用

试一试

异步函数fetchData（）{ const response=等待获取（'http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76'); const data=wait response.json（）； 控制台日志（数据）； document.getElementsByClassName（“display”）[0]。innerHTML=data.articles.map（函数（article）{ 返回`

• ${article.title}

• ${article.description}

• ${article.author}

`； }).加入（“”）； }

---

fetchData（）问题在于您的div元素属于类

display

，而不是id

display

，因此

document.getElementById（“display”）

返回空值。将

class=“display”

更改为

id=“display”

---

另外，使用

document.getElementById（“display”）.innerHTML

。

您被

id=“display”

引用，但它被设置为

class=“display”

异步函数fetchData（）{ const response=等待获取（'http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76'); const data=wait response.json（）； document.getElementById（“display”）.innerHTML=data[“articles”].map( 文章=>`

• ${article.title}

• ${article.description}

• ${article.author}
加入（“”）； } fetchData（）

---

请注意，如果有多篇文章，您将有多篇id为

新闻文章的
ul
，这是无效的HTML。任何引用该id的脚本将只获取第一个id。