MVC返回JSON字符串至Angular无法解析，如何转为可操作对象？

我遇到过类似的问题，这大概率是双重JSON序列化导致的问题，咱们一步步来拆解和解决：

问题根源 #

你在控制器的GetApplications方法里，先调用REST API拿到了已经是JSON格式的字符串，然后直接把这个字符串传给JsonResult返回。但JsonResult的作用是把.NET对象序列化为JSON字符串，所以它会把你传入的JSON字符串再做一次序列化——结果就是前端拿到的不是可解析的JSON对象，而是一个被转义过的字符串（虽然浏览器控制台里转义符没显示，但本质还是字符串，自然没法直接访问属性或用ng-repeat遍历）。

两种解决方案 #

方案一：直接返回ContentResult（推荐，适合不想反序列化的场景） #

既然已经拿到了现成的JSON字符串，我们不需要再让JsonResult做二次序列化，直接用ContentResult返回，指定内容类型为application/json即可：

public ActionResult GetApplications()
{
    // 调用REST API获取JSON字符串的逻辑
    string rawJson = YourRestApiCallMethod();
    
    // 直接返回原始JSON，指定内容类型
    return Content(rawJson, "application/json");
}

方案二：先反序列化为.NET对象再返回（适合需要在后端处理数据的场景） #

如果需要在后端对返回的数据做修改或校验，可以先把REST API返回的JSON字符串反序列化为.NET对象列表，再用JsonResult返回，这样JsonResult会正确地把对象序列化为JSON：

using Newtonsoft.Json; // 需要引用Newtonsoft.Json包

// 先定义对应实体类，和REST API返回的JSON结构匹配
public class Application
{
    public string Firstname { get; set; }
    // 其他属性根据实际JSON结构添加
}

public ActionResult GetApplications()
{
    string rawJson = YourRestApiCallMethod();
    
    // 反序列化为对象列表
    List<Application> applications = JsonConvert.DeserializeObject<List<Application>>(rawJson);
    
    // 这里可以对applications做额外处理（比如过滤、修改属性等）
    
    // 返回JsonResult，自动序列化对象为JSON
    return Json(applications, JsonRequestBehavior.AllowGet);
}

前端验证修改效果 #

修改后端接口后，Angular的$http.get调用就能拿到可直接操作的对象数组了：

$http.get('/YourController/GetApplications')
    .then(function(response) {
        $scope.applications = response.data;
        // 现在可以直接访问属性
        console.log(response.data[0].Firstname);
        // 也能正常用ng-repeat遍历
        // <div ng-repeat="app in applications">{{app.Firstname}}</div>
    });

为什么之前传数组成功？ #

之前能成功传输数组，应该是你当时直接返回的是.NET原生数组（比如List<T>），JsonResult直接把对象序列化为JSON，没有二次序列化的问题；而这次是先拿到了JSON字符串再返回，才触发了双重序列化的坑。

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