ASP.NET MVC视图中JavaScript读取JSON对象数组长度报错排查

你遇到的Uncaught TypeError: Cannot read property 'Certificates' of undefined错误，核心原因是你把JSON数组当成了键值对对象来访问。

从你给出的JSON结构来看，@Html.Raw(Json.Encode(Model))生成的是一个数组（外层是[]），数组里的每个元素才是包含Name、Certificates的对象。但你的代码里直接用obj[store]试图通过storeName作为键去取值，这显然不对——数组是按索引访问的，不是按对象的Name属性访问的，所以自然找不到对应的项，返回undefined，后续访问Certificates就会报错。

修正后的代码示例 #

下面是调整后的完整脚本，我会标注关键修改点：

// 优化：页面加载时就解析Model，避免每次调用函数重复解析JSON
var storeList = JSON.parse('@Html.Raw(Json.Encode(Model))');

function showCerts(storeName) {
    // 关键步骤：从数组中找到Name匹配storeName的目标对象
    var targetStore = storeList.find(item => item.Name === storeName);

    // 容错处理：如果找不到对应存储，直接返回并提示
    if (!targetStore) {
        console.log(`未找到名为 ${storeName} 的证书存储`);
        return;
    }

    var certsContainer = document.getElementById("certs");
    // 可选：清空容器，避免重复点击时重复添加内容
    certsContainer.innerHTML = '';

    // 遍历目标存储的Certificates数组
    targetStore.Certificates.forEach(cert => {
        var pNode = document.createElement("p");
        // 注意：这里的属性名要和你Model中Certificates的实际属性一致
        // 你给出的JSON示例里是Name，代码里写的是FingerPrint，需要对应起来
        pNode.textContent = cert.FingerPrint || cert.Name;
        certsContainer.appendChild(pNode);
    });
}

关键说明 #

1. 数组查找逻辑：用Array.find()方法从数组中筛选出Name与传入的storeName匹配的对象，这是解决问题的核心。
2. 容错处理：添加了if (!targetStore)的判断，避免因传入不存在的storeName导致后续代码报错。
3. 性能优化：把JSON解析步骤放在函数外面，页面加载时只执行一次，不用每次调用函数都重复解析。
4. 属性一致性：注意代码中访问的cert.FingerPrint要和你Model里的属性名对应——你给出的JSON示例里Certificates的属性是id和Name，如果实际Model里是FingerPrint就没问题，否则要改成cert.Name。

额外提示 #

如果你需要兼容更老的浏览器（不支持Array.find()），可以用for循环替代查找逻辑：

var targetStore = null;
for (var i = 0; i < storeList.length; i++) {
    if (storeList[i].Name === storeName) {
        targetStore = storeList[i];
        break;
    }
}

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