Question

我正在尝试在Html标签中显示JSON数据。但是我得到了错误：

未捕获（承诺）TypeError。

async function fetchData() {
        const response = await fetch('http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76');
        const data = await response.json();
        console.log(data);
    
        document.getElementById("display").insertAdjacentText = `
        ${data.articles.map(function (article) {
            return `
            <ul id="news-articles">
            <li class="article"><img class="article-img" src="${article.urlToImage}" alt="article-img"></li>
            <li class="article"><h2 class="article-title">${article.title}</h2></li>
            <li class="article"><p class="article-description">${article.description}</p></li>
           <li class="article"><span class="article-author">${article.author}</span></li>
            <li class="article"><a class="article-link" href="">${article.url} target="_blank"> </a></li>
            </ul>
             `
        }).join('')}`
    
    }
    fetchData();

<div class="display"></div>

Answer 1

当前，您正在将HTML实体作为文本插入，这将无法正常工作。

尝试

    async function fetchData() {
        const response = await fetch('http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76');
        const data = await response.json();
        console.log(data);

        document.getElementsByClassName("display")[0].innerHTML = data.articles.map(function (article) {
            return `
            <ul id="news-articles">
            <li class="article"><img class="article-img" src="${article.urlToImage}" alt="article-img"></li>
            <li class="article"><h2 class="article-title">${article.title}</h2></li>
            <li class="article"><p class="article-description">${article.description}</p></li>
           <li class="article"><span class="article-author">${article.author}</span></li>
            <li class="article"><a class="article-link" href="">${article.url} target="_blank"> </a></li>
            </ul>`;
        }).join('');

    }
    fetchData();

Answer 2

问题是您的div元素属于类display，而不是id display，因此document.getElementById("display")返回null。将class="display"更改为id="display"。

此外，为此使用document.getElementById("display").innerHTML。

Answer 3

您引用了id="display"，但已将其设置为class="display"。

async function fetchData() {
  const response = await fetch('http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76');
  const data = await response.json();

  document.getElementById("display").innerHTML = data["articles"].map(
    article => `<ul id="news-articles">
            <li class="article"><img class="article-img" src="${article.urlToImage}" alt="article-img"></li>
            <li class="article"><h2 class="article-title">${article.title}</h2></li>
            <li class="article"><p class="article-description">${article.description}</p></li>
           <li class="article"><span class="article-author">${article.author}</span></li>
            <li class="article"><a class="article-link" href="">${article.url} target="_blank"> </a></li></ul>`).join('');
}

fetchData();

<div id="display"></div>

如何将json数据转换为HTML标签？

3 个答案: