将Fetch获取的数据传递给反引号中的onClick函数-html教程-PHP中文网

将Fetch获取的数据传递给反引号中的onClick函数

碧海醫心

发布： 2025-09-04 18:31:16

原创

263人浏览过

将fetch获取的数据传递给反引号中的onclick函数

将Fetch获取的数据传递给反引号中的onClick函数

本文旨在解决在使用JavaScript的fetch API获取JSON数据后，如何正确地将数据对象传递给反引号字符串模板中的onClick函数。通过JSON序列化，我们可以安全地将对象作为参数传递给函数，并在事件处理程序中使用它。

在使用JavaScript从JSON文件中获取歌曲数据时，我们经常需要将这些数据传递给HTML元素上的onClick事件处理函数。然而，直接将对象传递给反引号字符串模板中的onClick函数可能会导致错误，因为JavaScript会将对象转换为字符串[object Object]。本文将介绍如何正确地将数据对象传递给onClick函数。

问题描述

假设我们使用fetch API从songs.json文件中获取歌曲数据，并使用map方法生成包含歌曲信息的HTML字符串。每个歌曲项都有一个播放按钮，点击该按钮时，我们希望将歌曲数据传递给makeAllplays()函数。

const res = await fetch('./songApi/songs.json');
const fetchedSongs = await res.json();
let list = "";
fetchedSongs.map((song) => {
  list += `
    <div class="songitem" style="background:${song.background} ;">
    <img src=${song.coverpath} alt="agar tum sath ho">
    <span class="name">${song.SongName}</span>
    <span class="songlistplay">
    <span class="songTime">${song.time}</span>
    <i class="far fa-play-circle songitemplay" onClick="makeAllplays(${song})" ></i>
    </span>
    </div>`;
});

登录后复制

上述代码中，直接将song对象传递给makeAllplays()函数会导致错误。

解决方案

为了正确地将歌曲数据传递给onClick函数，我们需要使用JSON.stringify()方法将对象转换为JSON字符串。这样，我们就可以将对象作为字符串传递给函数，并在函数内部将其解析为对象。

const res = await fetch('./songApi/songs.json');
const fetchedSongs = await res.json();
let list = "";
fetchedSongs.map((song) => {
  list += `
    <div class="songitem" style="background:${song.background} ;">
    <img src=${song.coverpath} alt="agar tum sath ho">
    <span class="name">${song.SongName}</span>
    <span class="songlistplay">
    <span class="songTime">${song.time}</span>
    <i class="far fa-play-circle songitemplay" onClick='makeAllplays(${JSON.stringify(song)})' ></i>
    </span>
    </div>`;
});

登录后复制

注意：

JSON.stringify()方法将JavaScript对象转换为JSON字符串。
我们需要使用单引号将onclick属性的值括起来，因为JSON字符串使用双引号。

示例代码

以下是一个完整的示例，演示如何将fetch获取的数据传递给反引号中的onClick函数：

即构数智人

即构数智人是由即构科技推出的AI虚拟数字人视频创作平台，支持数字人形象定制、短视频创作、数字人直播等。

查看详情

<!DOCTYPE html>
<html>
<head>
  <title>Fetch Data to onClick</title>
</head>
<body>
  <div id="songList"></div>

  <script>
    async function fetchData() {
      // 模拟的 songs.json 数据
      const songs = [
        { "SongName": "Song 1", "background": "red", "coverpath": "image1.jpg", "time": "3:30" },
        { "SongName": "Song 2", "background": "blue", "coverpath": "image2.jpg", "time": "4:15" }
      ];

      // 模拟 fetch 返回
      const fetchedSongs = songs;

      let list = "";
      fetchedSongs.map((song) => {
        list += `
          <div class="songitem" style="background:${song.background} ;">
          <img src=${song.coverpath} alt="${song.SongName}">
          <span class="name">${song.SongName}</span>
          <span class="songlistplay">
          <span class="songTime">${song.time}</span>
          <i class="far fa-play-circle songitemplay" onClick='makeAllplays(${JSON.stringify(song)})' ></i>
          </span>
          </div>`;
      });

      document.getElementById("songList").innerHTML = list;
    }

    function makeAllplays(song) {
      console.log("Song data:", song);
      // 在这里处理歌曲数据
      alert(`Playing: ${song.SongName}`);
    }

    fetchData();
  </script>
</body>
</html>

登录后复制

在这个示例中，我们首先定义了一个fetchData函数，该函数模拟了从songs.json文件中获取数据。然后，我们使用map方法生成包含歌曲信息的HTML字符串，并将每个歌曲项的onClick事件处理函数设置为makeAllplays()。我们使用JSON.stringify()方法将歌曲数据转换为JSON字符串，并将其传递给makeAllplays()函数。

在makeAllplays()函数中，我们使用JSON.parse()方法将JSON字符串解析为JavaScript对象，并使用该对象来播放歌曲。

总结

通过使用JSON.stringify()方法，我们可以安全地将对象作为参数传递给反引号字符串模板中的onClick函数。这使得我们能够在事件处理程序中使用歌曲数据，并执行相应的操作。

注意事项：

确保在makeAllplays()函数中解析JSON字符串。
使用单引号将onclick属性的值括起来。

遵循这些步骤，你就可以正确地将fetch获取的数据传递给反引号中的onClick函数。

以上就是将Fetch获取的数据传递给反引号中的onClick函数的详细内容，更多请关注php中文网其它相关文章！