JavaScript遍历ASP.NET Core Web API返回数组及$id问题解析

关于$id字段的产生原因 #

• 该字段是JSON序列化器开启引用保留特性时自动生成的元数据，并非业务代码中定义的字段。
• 当你在ASP.NET Core的序列化配置中开启了引用处理规则（System.Text.Json的ReferenceHandler.Preserve，或Newtonsoft.Json的PreserveReferencesHandling相关配置），序列化器会为每个序列化输出的对象、集合分配唯一的$id标识，用于处理循环引用、重复对象引用场景，避免序列化死循环或冗余数据输出。
• 你预期的纯数组结果被包装为{$id: 标识值, $values: 实际数组}的对象结构，就是该配置导致的。

JavaScript遍历访问数据的方法 #

你拿到的data是包装后的普通对象，不是数组，因此直接访问data.length会返回undefined。真实的业务数据数组存储在data.$values属性下，直接读取该属性即可正常操作：

const uri = "https://localhost:44395/visa/ae/names";
fetch(uri)
   .then((response) => response.json())
   .then((data) => {
       const visaNameList = data.$values;
       // 获取数组长度
       console.log("数组长度：", visaNameList.length);
       // 遍历访问字段，注意序列化后字段为小驼峰格式：id、name，和C#类的大驼峰命名有区别
       visaNameList.forEach(item => {
           console.log("条目id：", item.id, "条目name：", item.name);
       });
   });

推荐优化方案（后端配置调整） #

如果你的接口不存在循环引用、重复对象引用的序列化需求，建议直接在后端关闭引用保留配置，让接口直接返回纯数组结构，省去前端额外取值的步骤：

• 若使用默认的System.Text.Json序列化器，在Program.cs中修改配置：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        // 移除原有ReferenceHandler.Preserve配置，显式关闭引用保留
        options.JsonSerializerOptions.ReferenceHandler = null;
    });

• 若使用Newtonsoft.Json作为序列化器，修改对应配置：

builder.Services.AddControllers()
    .AddNewtonsoftJson(options =>
    {
        // 关闭引用保留
        options.SerializerSettings.PreserveReferencesHandling = PreserveReferencesHandling.None;
    });

配置修改后重启服务，接口会直接返回标准JSON数组，前端可直接通过data.length获取长度、遍历data访问所有字段。

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