AngularJS中合并多JSON对象及扩展API响应数据的实现方法

嘿，这两个问题都是AngularJS开发中很常见的JSON处理场景，我来给你详细解答～

AngularJS本身提供了便捷的工具方法，同时你也可以用原生JS的方式实现，根据你的需求选择合适的方法：

• 使用angular.merge()（推荐的深度合并）
  这个方法会递归合并多个对象，不仅会处理顶层属性，嵌套的子对象也会被合并，而且不会修改原对象（如果传入空对象作为目标的话）。如果有重复属性，后面的对象会覆盖前面的。

  var obj1 = { name: 'Japan', capital: 'Tokyo' };
  var obj2 = { population: 125700000, details: { currency: 'Yen' } };
  var mergedObj = angular.merge({}, obj1, obj2);
  // 结果：{ name: 'Japan', capital: 'Tokyo', population: 125700000, details: { currency: 'Yen' } }
  

• 使用Object.assign()（浅合并）
  这是ES5+的原生方法，属于浅合并——如果对象里有嵌套的子对象，只会复制引用，不会深拷贝。适合简单的顶层属性合并：

  var mergedObj = Object.assign({}, obj1, obj2);
  

• 手动遍历合并（自定义规则）
  如果需要自定义合并逻辑（比如某些属性不覆盖、特殊处理空值），可以手动遍历属性：

  var mergedObj = {};
  // 先复制第一个对象的属性
  Object.keys(obj1).forEach(key => mergedObj[key] = obj1[key]);
  // 再处理第二个对象，只覆盖空值的属性
  Object.keys(obj2).forEach(key => {
    if (mergedObj[key] === null || mergedObj[key] === undefined) {
      mergedObj[key] = obj2[key];
    }
  });
  

当然可以！这是非常常见的需求——我们可以通过先获取基础数据，再请求补充数据，最后合并结果的方式实现，同时还能新增自定义字段。下面结合你提到的Api service.js和Controller.js给出具体示例：

第一步：封装API服务（Api service.js） #

把API调用逻辑封装在服务里，方便复用和维护：

angular.module('yourAppName').service('CountryService', ['$http', '$q', function($http, $q) {
  // 获取国家基础详情的API
  this.getBaseCountryData = function() {
    return $http.get('/api/countries')
      .then(res => res.data)
      .catch(err => {
        console.error('获取基础国家数据失败:', err);
        return $q.reject(err);
      });
  };

  // 获取补充数据的API（假设通过国家代码请求）
  this.getExtraCountryData = function(countryCode) {
    return $http.get(`/api/countries/extra/${countryCode}`)
      .then(res => res.data)
      .catch(err => {
        console.error(`获取${countryCode}的补充数据失败:`, err);
        return $q.reject(err);
      });
  };
}]);

第二步：在控制器中处理数据合并（Controller.js） #

在控制器里调用两个API，合并数据并填充空字段、新增自定义字段：

angular.module('yourAppName').controller('CountryController', ['$scope', '$q', 'CountryService', function($scope, $q, CountryService) {
  $scope.processedCountries = [];

  // 初始化数据流程
  function loadAndProcessCountries() {
    CountryService.getBaseCountryData()
      .then(baseCountries => {
        // 为每个国家请求补充数据，生成Promise数组
        const processPromises = baseCountries.map(country => {
          // 假设基础数据里有countryCode字段，用来请求补充数据
          return CountryService.getExtraCountryData(country.countryCode)
            .then(extraData => {
              // 1. 合并补充数据，自动填充空字段（angular.merge会覆盖空/undefined的属性）
              angular.merge(country, extraData);
              // 2. 新增自定义id字段（这里用国家代码生成，你可以根据需求调整）
              country.id = `cnt_${country.countryCode.toLowerCase()}`;
              return country;
            });
        });

        // 等待所有国家的补充数据请求完成
        return $q.all(processPromises);
      })
      .then(processedData => {
        $scope.processedCountries = processedData;
        console.log('处理完成的国家数据:', processedData);
      })
      .catch(err => {
        console.error('数据处理流程出错:', err);
      });
  }

  // 启动数据加载
  loadAndProcessCountries();
}]);

关键注意点： #

• 用$q.all()来等待所有补充数据的请求完成，避免异步请求导致的数据顺序混乱
• angular.merge()会智能处理空字段：如果基础数据里的字段是空/undefined，补充数据里的对应值会自动覆盖它；如果基础数据已有值，则不会被替换
• 新增的id字段可以根据你的业务规则生成，比如用后端返回的唯一标识、UUID，或者像示例里用国家代码拼接
• 如果补充数据可以批量获取（比如一次请求拿到所有国家的补充信息），可以优化成单次请求，减少API调用次数，提升性能

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