将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函数：
<!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函数。
