如何使用map函数将JSON数据输入到div元素中

Question

我有一个 API URL，就是这个

https://api-amvstrm.nyt92.eu.org/api/v1

/popular，API 响应如下所示

t

itle": "Dungeon Meshi",

      "id": "dungeon-meshi",

      "image_url": "https://gogocdn.net/cover/dungeon-meshi-1704169699.png",

      "released": "2024"

所以我想使用js中的map函数将数据从API重定向到这个html容器中

                                    </div>

                                    <div class="product__item__text">

                                        <ul>

                                            <li>Active</li>

                                            <li>Movie</li>

                                        </ul>

                                        <h5><a href="#">Kizumonogatari III: Reiket su-hen</a></h5>

                                    </div>

                                </div>

                            </div>

                            <div class="col-lg-4 col-md-6 col-sm-6">

                                <div class="product__item">

                                    <div class="product__item__pic set-bg" data-setbg="img/popular/popular-3.jpg">

                                        <div class="ep">18 / 18</div>

                                        <div class="comment"><i class="fa fa-comments"></i> 11</div>

                                        <div class="view"><i class="fa fa-eye"></i> 9141</div>

有没有办法可以使用js的map功能只显示标题和图片图片？谢谢你

Answer 1

假设这是您的 API 端点： https://api-amvstrm.nyt92.eu.org/api/v1

现在，首先您必须在 JavaScript 代码中获取此 API。等等，我正在向您展示如何获取。

    async function fetchData() {
      try {
        const response = await fetch('https://api-amvstrm.nyt92.eu.org/api/v1');
      // Replace with your API endpoint
        const data = await response.json();
        return data;
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

然后您可以创建一个函数来显示获取的数据，如下所示：

 // Function to display data on the screen
async function displayData() {
  const dataContainer = document.getElementById('data-container');
  
  // Fetch data from the API
  const posts = await fetchData();

  // Check if data exists
  if (posts && posts.length > 0) {
    const postsHTML = posts.map(post => `
      <div key=${post.id}>
        <h2>${post.title}</h2>
        <p>${post.released}</p>
      </div>
    `).join('');

    // Display data on the screen
    dataContainer.innerHTML = postsHTML;
  } else {
    dataContainer.innerHTML = '<p>No posts found</p>';
  }
}

然后你可以调用这个displayData函数来获取详细信息。