如何解析JSON中带转义符的Data字段并合并至原JSON？

嘿，我完全懂你现在的困扰——要把JSON里那个带转义字符的Data字段解析出来，把里面的键值对合并到原对象里，再删掉原来的Data字段对吧？别担心，不管是用原生JavaScript还是AngularJS，都有很简洁的实现方式，我给你整理了两种方案：

一、原生JavaScript实现 #

这个方案适用于任何纯JS环境，步骤很清晰：

1. 先把原始JSON（如果是字符串的话）解析成JS对象
2. 解析Data字段里的转义JSON字符串，得到一个新对象
3. 把原对象（去掉Data）和解析后的Data对象合并
4. 处理可能的解析异常（比如Data不是合法JSON）

// 示例原始JSON字符串（如果已经是JS对象，直接跳过第一步）
const rawJsonString = `{
  "id": 123,
  "name": "Test Product",
  "Data": "{\"price\":99.99,\"stock\":50,\"category\":\"Electronics\"}"
}`;

// 1. 解析原始JSON为JS对象
const originalObject = JSON.parse(rawJsonString);

try {
  // 2. 解析Data字段中的转义JSON字符串
  const parsedData = JSON.parse(originalObject.Data);
  
  // 3. 合并对象并移除原Data字段
  // 用展开运算符把原对象和解析后的Data合并，再删除Data字段
  const finalObject = {
    ...originalObject,
    ...parsedData
  };
  delete finalObject.Data;

  console.log('处理后的结果:', finalObject);
  // 输出：
  // { id: 123, name: 'Test Product', price: 99.99, stock: 50, category: 'Electronics' }
} catch (error) {
  console.error('解析Data字段出错啦:', error);
  // 这里可以加用户提示，比如"数据格式有误，请重试"
}

如果你的原始数据已经是JS对象（比如从接口获取后自动解析了），直接跳过JSON.parse(rawJsonString)这一步就行。另外，如果担心原对象和Data里有同名键，解析后的Data键会覆盖原对象的，这个是符合大多数业务场景的，如果需要保留原对象的键，把合并顺序反过来就行。

二、AngularJS实现 #

在AngularJS项目里，我们可以用框架自带的angular.extend方法来合并对象，逻辑和原生JS差不多，适合在控制器或服务里使用：

// 假设这是你的AngularJS模块
const app = angular.module('MyApp', []);

app.controller('DataProcessController', function($scope) {
  // 示例：从接口获取的原始数据（AngularJS的$http会自动把JSON字符串解析为对象）
  $scope.rawData = {
    id: 456,
    name: "Test User",
    Data: "{\"username\":\"johndoe\",\"phone\":\"123-456-7890\",\"isActive\":true}"
  };

  $scope.processNestedData = function() {
    try {
      // 解析Data字段的转义JSON
      const parsedData = JSON.parse($scope.rawData.Data);
      
      // 用angular.extend合并对象：第一个参数是空对象，避免修改原始数据
      $scope.processedData = angular.extend({}, $scope.rawData, parsedData);
      // 删除原Data字段
      delete $scope.processedData.Data;

      console.log('处理完成:', $scope.processedData);
    } catch (err) {
      console.error('Data字段解析失败:', err);
      // 可以在这里给用户显示错误提示，比如$scope.errorMsg = '数据解析失败，请联系管理员'
    }
  };

  // 页面加载时自动处理数据
  $scope.processNestedData();
});

这里用angular.extend({}, 原对象, 解析后的Data)是为了创建一个新对象，不会修改原始的rawData，如果不需要保留原始数据，也可以直接合并到rawData上。

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