AngularJS技术问询：从Rest API获取JSON后调用多边形绘制函数

看起来你在AngularJS里处理数组、解析Rest API返回的JSON配置时遇到了状况，我帮你梳理几个常见的坑和对应的解决思路，结合你给出的代码来分析：

1. 最常见：spotcam.jsonconfig未加载完成就调用 #

Rest API请求是异步的，很可能你触发setPolygone的时候，接口还没返回数据，导致spotcam.jsonconfig是undefined或者null。

解决办法： #

• 确保API请求完成后再允许调用该函数：

  // 假设你用$http请求Rest API
  $http.get('/api/get-json-config')
    .then(function(response) {
      spotcam.jsonconfig = response.data;
      // 可以在这里初始化相关状态，比如按钮可用状态，避免用户提前点击
      $scope.configLoaded = true;
    });
  

• 在setPolygone里加前置校验，避免报错中断流程：

  $scope.setPolygone = function (id) {
    if (!spotcam || !spotcam.jsonconfig) {
      console.error('JSON配置还没加载完成哦');
      return;
    }
    console.log(spotcam.jsonconfig);
    // 后续解析逻辑
  };
  

2. JSON解析报错（SyntaxError） #

如果spotcam.jsonconfig本身已经是JavaScript对象（而不是JSON字符串），再调用JSON.parse()就会直接报错。

解决办法： #

先判断类型，再决定是否解析：

$scope.setPolygone = function (id) {
  let parsedConfig;
  try {
    if (typeof spotcam.jsonconfig === 'string') {
      parsedConfig = JSON.parse(spotcam.jsonconfig);
    } else if (typeof spotcam.jsonconfig === 'object') {
      parsedConfig = spotcam.jsonconfig;
    } else {
      console.error('配置数据类型无效，既不是字符串也不是对象');
      return;
    }
    $scope.DrawPolygon(id, parsedConfig, true);
  } catch (e) {
    console.error('JSON解析出错了:', e);
  }
};

3. DrawPolygon处理数组时的异常 #

如果DrawPolygon是用来处理数组的函数，还要注意解析后的配置是否符合它的预期结构：

• 先打印确认解析后的数据类型：

  console.log('解析后的配置:', parsedConfig, '是否为数组:', Array.isArray(parsedConfig));
  

• 增加数组合法性校验：

  if (!Array.isArray(parsedConfig) || parsedConfig.length === 0) {
    console.warn('配置数组为空或者不是数组类型，无法绘制多边形');
    return;
  }
  

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