如何用for循环遍历多层嵌套JSON？获取播放量时出现undefined错误

原代码出现undefined的原因主要有以下几点：

• JSON结构理解错误：接口返回的result是对象而非数组，result.length为undefined，循环无法执行。实际专辑数据存放在result.topalbums.album数组中。
• 未声明变量：代码中使用的j变量未定义，会引发报错。
• 数组索引错误：testarray[i]['playcount']写法错误，testarray本身就是专辑数组，应直接遍历数组内的每一项，而非用外层循环的i去索引。

function getData(){
    $("#output").html("<b>hi there</b>");
    $.getJSON('https://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=drake&api_key=22102f7d3a814de0736edf670bd2c771&format=json',function(result){
        console.log(result);
        // 正确获取专辑数组
        const albums = result.topalbums.album;
        const newdata = [];
        
        // 遍历专辑数组，提取目标数据
        for (let i = 0; i < albums.length; i++) {
            const album = albums[i];
            // 构造你需要的[播放量, 名称]格式
            const item = [album.playcount, album.name];
            newdata.push(item);
        }
        
        console.log(newdata);
        // 此处可将newdata传入柱状图渲染逻辑
    })
}

用map方法可以更简洁地生成目标数组：

function getData(){
    $("#output").html("<b>hi there</b>");
    $.getJSON('https://ws.audioscrobbler.com/2.0/?method=artist.gettopalbums&artist=drake&api_key=22102f7d3a814de0736edf670bd2c771&format=json',function(result){
        const newdata = result.topalbums.album.map(album => [album.playcount, album.name]);
        console.log(newdata);
        // 后续柱状图逻辑
    })
}

执行后就能得到你需要的[播放量, 名称]格式数组，可直接用于柱状图数据渲染。

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