Node.js对接AngularJS：如何在页面正确展示外部接口响应数据

嘿，刚接触NodeJS和AngularJS对吧？碰到JSON在UI里显示成带反斜杠的字符串这种问题挺常见的，本质上是数据被双重序列化了，我来帮你一步步搞定～

第一步：检查NodeJS后端的响应处理 #

大概率是后端返回数据的时候多做了一次JSON序列化操作。比如用Express框架的话，如果你已经把对象用JSON.stringify()转成字符串，再用res.send()返回，Express会默认把响应内容再转一次JSON，就会出现转义字符。

错误示例： #

// 别这么做！双重序列化导致转义字符
app.get('/your-api-endpoint', (req, res) => {
  // 假设这是你从外部站点获取到的响应对象
  const externalResponse = { count:3, page:1, ... };
  // 错误：先转成字符串，Express会再转一次
  res.send(JSON.stringify(externalResponse));
});

正确做法： #

直接返回原始对象，Express的res.json()或者res.send()会自动帮你做一次正确的序列化：

app.get('/your-api-endpoint', (req, res) => {
  const externalResponse = { count:3, page:1, ... };
  // 直接返回对象，框架自动处理成JSON响应
  res.json(externalResponse);
  // 或者用res.send(externalResponse)也可以
});

第二步：检查AngularJS前端的解析逻辑 #

如果后端已经正确返回JSON，Angular的$http服务默认会把响应体解析成JSON对象。但如果你手动再调用JSON.parse()，反而会把对象转成带转义的字符串。

错误示例： #

// 别这么做！如果response.data已经是对象，parse会出错
$http.get('/your-api-endpoint')
  .then(function(response) {
    // 错误操作：把已经解析好的对象又转成字符串
    $scope.campaignData = JSON.parse(response.data);
  });

正确做法： #

直接使用response.data即可，因为$http已经帮你完成了解析：

$http.get('/your-api-endpoint')
  .then(function(response) {
    // 直接赋值解析后的对象
    $scope.campaignData = response.data;
  });

特殊情况：后端没法修改怎么办？ #

如果因为某些原因后端只能返回双重序列化的字符串，那你可以在前端手动解析一次：

$http.get('/your-api-endpoint')
  .then(function(response) {
    // 把带转义的字符串解析成JSON对象
    const parsedData = JSON.parse(response.data);
    $scope.campaignData = parsedData;
  });

快速验证方法 #

你可以在浏览器控制台里打印response.data，看看它的类型：

• 如果是string类型，说明后端返回的是双重序列化的字符串，优先改后端；
• 如果是object类型，那就是前端处理时多做了不必要的解析操作。

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