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

f2uvfpb9 于 12个月前发布在其他

关注(0)|答案(1)|浏览(167)

我有一个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函数只显示标题和图片？谢谢ki

JSON

来源：https://stackoverflow.com/questions/77781742/how-to-use-the-map-function-to-input-json-data-into-a-div-element

1条答案

按热度按时间

9bfwbjaz1#

假设这是您的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>';
  }
}

型
然后你可以调用这个显示数据函数来获取细节。

赞(0）回复(0）举报 12个月前

我来回答

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

1条答案

相关问题

热门标签

最新问答