javascript - 如何从 api 获取信息并将其显示在 DOM 上？-6ren

javascript - 如何从 api 获取信息并将其显示在 DOM 上？

转载作者：行者123 更新时间：2023-12-04 17:16:58

25

4

我正在尝试让我的 api 中的内容显示在 DOM 中。我一直得到一个未定义的，但我知道它在那里。它出现在我的控制台中。我只是不知道当我想要的对象嵌套到另一个数组中时我还需要做哪些额外的事情，我什至不知道如何将它放到 DOM 上。

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('songs').addEventListener('click', getSongs)

  //getSongs()
})

function getSongs() {
  let info = document.getElementById('info')
  let songList = document.getElementById('song-list')
  //info.innerHTML = ""
  songList.innerHTML = ""
    fetch('https://itunes.apple.com/search?term=K-Pop')
      .then(resp => resp.json())
      .then(data => {
        data.results.map(song => { 
          //console.log(song)
          songList.innerHTML += `
            <li>
             <a href="#" data-name="${song.trackName}"
             data-id="${song.trackId}"> ${song.trackName} </a>
            </li>
          `
        })
        attachLinks()
    })
}

function attachLinks() {
  const songs = document.querySelectorAll('li a')
  songs.forEach(song => {
    song.addEventListener('click', displaySong)
  })
}

function displaySong(event) {
  console.log(event.target)
  let songList = document.getElementById('song-list')
  let info = document.getElementById('info')
  /*songList.innerHTML = `<h1>Song Name:</h1>
                        <p>${event.dataset.trackName}</p>
                        <h2>Artist Name:</h2>
                        <p>${event.dataset.artistName}</p>
                        <h3>Release Date:</h3>
                        <p>${event.dataset.releaseDate}</p>`*/
  songList.innerHTML = ""
  info.innerHTML = ""
  fetch(`https://itunes.apple.com/search?term=K-Pop/${event.target.dataset.id}`)
      .then(resp => resp.json())
      .then(song  => {
        //console.log(song)
          info.innerHTML += `
          <h1>${song.trackName}</h1>
          <h3>Artist Name: </h3>
          <p>${song.artistName}</p>
          <h3>Release Date: </h3>
          <p>${song.releaseDate}</p>
        `
        })
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Music</title>
        <link rel="stylesheet" href="index.css"/>
    
    </head>
        <body>
            <h1>Music</h1>
            <h2 id='input'>K-Pop</h2>
            <button id="songs">All songs</button>
            <hr>
            <br>
        <div id="main">
            <ul id="song-list">

            </ul>
        <div id="info">

        </div>
        </div>
            <script src="index.js"></script>
        </body>
</html>

这是来自 api 的所有数据的样子 enter image description here

最佳答案

似乎第二次调用错误的端点

尝试改变这个调用

`https://itunes.apple.com/search?term=K-Pop/${event.target.dataset.id}`

为此

`https://itunes.apple.com/lookup?id=${event.target.dataset.id}`;

如果我们期望 event.target.dataset.id 为 '1574770128'，这应该以这种形式返回一些 json

{
    "resultCount": 1,
    "results":
    [
        {
            "wrapperType": "track",
            "kind": "song",
            "artistId": 883131348,
            "collectionId": 1574770126,
            "trackId": 1574770128,
            "artistName": "BTS",
            "collectionName": "Permission to Dance - Single",
            "trackName": "Permission to Dance",
            "collectionCensoredName": "Permission to Dance - Single",
            "trackCensoredName": "Permission to Dance",
            "artistViewUrl": "https://music.apple.com/us/artist/bts/883131348?uo=4",
            "collectionViewUrl": "https://music.apple.com/us/album/permission-to-dance/1574770126?i=1574770128&uo=4",
            "trackViewUrl": "https://music.apple.com/us/album/permission-to-dance/1574770126?i=1574770128&uo=4",
            "previewUrl": "https://audio-ssl.itunes.apple.com/itunes-assets/AudioPreview125/v4/e1/6e/12/e16e1227-97a2-acf8-e3e0-6685f746695a/mzaf_12664711249777906736.plus.aac.p.m4a",
            "artworkUrl30": "https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/cd/9b/1f/cd9b1fec-28b4-cbb9-42f5-adffcfbeba36/source/30x30bb.jpg",
            "artworkUrl60": "https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/cd/9b/1f/cd9b1fec-28b4-cbb9-42f5-adffcfbeba36/source/60x60bb.jpg",
            "artworkUrl100": "https://is3-ssl.mzstatic.com/image/thumb/Music125/v4/cd/9b/1f/cd9b1fec-28b4-cbb9-42f5-adffcfbeba36/source/100x100bb.jpg",
            "collectionPrice": 0.69,
            "trackPrice": 0.69,
            "releaseDate": "2021-07-09T12:00:00Z",
            "collectionExplicitness": "notExplicit",
            "trackExplicitness": "notExplicit",
            "discCount": 1,
            "discNumber": 1,
            "trackCount": 1,
            "trackNumber": 1,
            "trackTimeMillis": 187585,
            "country": "USA",
            "currency": "USD",
            "primaryGenreName": "K-Pop",
            "isStreamable": false
        }
    ]
}

要将响应映射到 View ，您需要执行如下操作:

fetch(`https://itunes.apple.com/lookup?id=${event.target.dataset.id}`)
    .then(resp => resp.json())
    .then(data  => {
        const song = data.results[0];
        if (song) {        
            info.innerHTML += `
            <h1>${song.trackName}</h1>
            <h3>Artist Name: </h3>
            <p>${song.artistName}</p>
            <h3>Release Date: </h3>
            <p>${song.releaseDate}</p>
            `;
        }
    })

关于javascript - 如何从 api 获取信息并将其显示在 DOM 上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68505496/

25

4

0

文章推荐： docker - .env 文件被 "sourced"忽略而不是 `docker-compose`

文章推荐： npm - 不使用私有(private)注册表的 Gitlab 语义发布

文章推荐： javascript - 每次点击将类添加到单个 div

dom - 哪些因素促使虚拟 DOM 超越浏览器原生 DOM？
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
dom - polymer : Light DOM vs Local DOM
Polymer的light DOM和local DOM有什么区别？来自文档(1): The DOM that an element creates and manages is called its
dom - DOM 突变事件库？
当内容添加到网页时，我需要触发一个 Action 。更新可能具有不同的性质(例如 AJAX、延迟脚本、用户操作)并且不受我的控制。我想使用 DOM 突变事件，但它们并非在所有浏览器中都可用。是否有为
shadow-dom - 我可以在 Shadow DOM 中获得一个按钮来提交不在 Shadow DOM 中的表单吗？
我刚遇到一个有趣的情况，我有一个提交放置在内的 native 自定义元素的 Shadow DOM 内. Select #shadow-root ...
javascript - 在当前 dom 之前添加 dom，并保持当前 dom 留在视口(viewport)中
假设有一个滚动列表，当我插入一些新的 DOM 附加到当前 dom 时，它工作正常。上拉但是如果我之前插入一些新的 DOM，新的 DOM 将在视口(viewport)中，而旧的 DOM 将被下推。下拉
dom - Shadow DOM 是否像 React.js 中的 Virtual DOM 一样快？
在我的项目中实现 Shadow DOM 是否会使它们像 React 使用的虚拟 DOM 一样更快？最佳答案它们是不同用途的不同事物，因此比较性能没有意义。虚拟 DOM 虚拟 DOM 旨在避免对
dom - 从 DOM 中选择元素
在我的页面内容上，我将多张卡片组织成网格 __________________ | ____ ____ | | | | | | | | | | | |
dom - 在浏览器中调试自定义 DOM 事件
是否可以在浏览器中看到(调试)从 DOM 元素触发的自定义事件？假设我想查看 Bootstrap Collapse 的哪个特定元素触发了 show.bs.collapse event ，我能以某种方
dom - 浏览器会自动插入哪些 DOM 元素？
我正在生成用于客户端的 XPaths 服务器端，我很困惑为什么在 DOM 中找不到表路径(即 td 中的内容)。事实证明，现代浏览器(至少是 Chrome 和 Firefox)插入了 tbody在文
dom - 检索 DOM 文本节点位置
是否可以检索文本节点的几何位置(即从父元素、页面等的顶部/左侧偏移量)？最佳答案不是直接的。 TextNode 没有用于测量视口(viewport)定位的原始 IE 偏移*(和类似的)扩展。仅在
dom - 什么是 DOM 元素？
以下语句中的 DOM 元素的含义是什么？ Statement #1 You can add multiple classes to a single DOM element. Statement #2
dom - 卡住 Dom 操作
有没有办法让 firebug(或任何其他浏览器，或使用任何其他工具)阻止任何 dom 操作的发生？有时布局调试充满悬停事件的屏幕是不可能的，因为元素可能会消失，并且您看不到它们的复合布局。最佳答案
dom - 我需要元素的完整 dom 节点路径
我需要在html文档中搜索 text here 然后输出完整的节点路径(CSS或XPATH) 例如 html > body > div class ="something" > table > tr
dom - 页面加载时间中的 DOM 加载时间代表什么？
这是我的一个页面的典型加载时间如何拆分为:- Domain Lookup 0 0 % Connect 134 .3% Request
dom - .on() 未检测到 dom 更改
我的 .on() 工作时遇到一些问题。我的网站是here . 如果你看看 www.eliteweb-creation.co.uk/dev/js/nav.js，我正在 mouseenter 和 mous
dom - YUI3 DOM 未定义？
我是 Javascript 的新手，负责将我们产品的 UI 从 YUI2 迁移到 YUI3。看起来哪里都没有迁移指南，所以我现在正在浏览互联网帖子和 yui 文档。在我的全局范围内，我临时添加了类似
dom - 如何与实习生一起测试 DOM 敏感性
我想和实习生一起测试一些 DOM 相关的东西，不需要特定的固定装置，只是一般的 DOM 东西，比如我改变了 Element.prototype。这是否需要通过本地 Selenium 服务器(或 sau
dom - 文档对象模型 (DOM) 概念背后的真正思想是什么？
我是 HTML 和 HTML5 的初学者。当我阅读以下内容时 link ，我找到了术语 DOM 和 DOM API。我通读了维基百科，但无法理解其背后的全部思想。谁能给我解释一下: 文档对象模型
dom - DOM 扩展/包装究竟是什么？
我有两个主要问题。 Object 之类的扩展是否算数？什么是 DOM 包装？ http://perfectionkills.com/whats-wrong-with-extending-the-do
dom - 建议用于构建小部件的最小 Dom 操作库
对不起查询,原型(prototype)，雅虎 YUI，道场在考虑小的时候不吸引我。我想要一个模块化的库，代码尽可能小，最多 20Kb [un compressed] 是我所期望的。应该提供 Dom 操

首页

博学

6Ren·AI

商城

javascript - 如何从 api 获取信息并将其显示在 DOM 上？