Code.org开发中如何通过选中曲目名匹配对应歌手并展示

原代码问题梳理 #

• 匹配逻辑错误：判断条件中直接将选中曲目和整个曲目数组对比，无法触发匹配分支
• 未读取歌手列数据，无法获取匹配后的对应歌手信息
• 赋值逻辑位置错误，无论是否匹配都会重复执行赋值操作，存在冗余

修改后可直接运行的代码 #

首先确认你展示歌手的label组件ID，以下示例假设该组件ID为artistLabel_1，如果实际ID不同请替换代码中对应字段：

onEvent("fighter1", "change", function( ) {
    // 获取用户选中的曲目
    var Track = getProperty("fighter1", "text");
    var ChosenTrack = Track.substring(0, 100);
    // 同时读取曲目列和歌手列数据，两者索引一一对应
    var TrackName = getColumn("Spotify Charts: Top 200 Artist and Song", "Track");
    var ArtistName = getColumn("Spotify Charts: Top 200 Artist and Song", "Artist");
    // 遍历匹配曲目
    for (var i = 0; i < TrackName.length; i++) {
        // 匹配到对应曲目
        if (ChosenTrack == TrackName[i]) {
            // 展示选中的曲目名
            setProperty("songLabel_1", "text", ChosenTrack);
            // 展示对应索引的歌手名
            setProperty("artistLabel_1", "text", ArtistName[i]);
            // 匹配成功后退出循环，避免不必要的遍历
            break;
        }
    }
});

核心修改说明 #

• 新增读取歌手列Artist的代码，和曲目列的索引完全对应，匹配到曲目索引后直接取同位置的歌手数据即可
• 修正判断条件为匹配数组的第i个元素，匹配成功后同时给曲目label和歌手label赋值
• 新增break语句，匹配成功后直接终止循环，提升运行效率

内容的提问来源于stack exchange，提问作者Russel Manzanarez