JS遍历嵌套JSON多层级取值仅显示首条结果问题咨询

你在访问嵌套属性时错误复用了根数组的外层循环索引i，导致数组越界抛出异常，后续代码停止运行：

• 外层循环的i是根数组的索引，用于遍历多个活动对象
• 每个活动对象下的EventInstances、Resources都是独立的子数组，你的样例数据中每个子数组都只有1个元素，当i >= 1时访问EventInstances[i]会得到undefined，继续访问undefined的属性会直接抛出类型错误，终止脚本执行。

方案1：固定取子数组第一项（适用于每个活动仅1个实例、每个实例仅1个资源的场景） #

直接固定访问子数组的第0项即可，同时建议加可选链运算符做兼容，避免子数组为空时脚本崩溃：

function appendData(data) {
    var mainContainer = document.getElementById("busunit");
    for (var i = 0; i < data.length; i++) {
        var div = document.createElement("div");
        // 用?.做可选判空，某一层级为空时不会抛出错误
        const resourceName = data[i]?.EventInstances?.[0]?.Resources?.[0]?.ResourceName || '无资源信息';
        div.innerHTML = 'Descripción:' + data[i].EventDescription + ' 讲师：' + resourceName + '<br> ';
        mainContainer.appendChild(div);
    }
};

方案2：嵌套循环遍历所有子项（适用于每个活动有多个实例、每个实例有多个资源的场景） #

对每个层级的数组单独做循环遍历，获取所有嵌套属性值：

function appendData(data) {
    var mainContainer = document.getElementById("busunit");
    // 遍历根层级的活动数组
    for (var i = 0; i < data.length; i++) {
        const eventItem = data[i];
        var eventDiv = document.createElement("div");
        eventDiv.innerHTML = `<h3>活动名称：${eventItem.EventDescription}</h3>`;
        mainContainer.appendChild(eventDiv);
        // 遍历当前活动的所有实例
        for(var j = 0; j < eventItem.EventInstances.length; j++) {
            const instance = eventItem.EventInstances[j];
            // 遍历当前实例的所有资源
            for(var k = 0; k < instance.Resources.length; k++) {
                const resource = instance.Resources[k];
                var resDiv = document.createElement("div");
                resDiv.innerHTML = `&nbsp;&nbsp;资源名称：${resource.ResourceName}，资源ID：${resource.ResourceId}<br>`;
                eventDiv.appendChild(resDiv);
            }
        }
    }
};

内容的提问来源于stack exchange，提问作者Rob Carcacho Maldonado Valdes