PHP对象数组转换为JavaScript对象数组时出现Uncaught SyntaxError错误的问题排查

问题回顾 #

你通过PHP从数据库获取服务数据，转成JSON后尝试在JavaScript中解析，代码大致是这样的：

$serviceDetails = Services::services_find_all();
$convertData = json_encode($serviceDetails);
echo $convertData;

然后在HTML的<script>标签里写：

<script> let portfolioData = JSON.parse("<?php echo $convertData;?>"); </script>

结果触发了Uncaught SyntaxError: missing ) after argument list错误。

错误原因 #

问题出在引号的嵌套冲突上：

• 你用双引号把PHP输出的JSON包裹起来，但是JSON本身的键和值都是用双引号包裹的（比如"services_name":"Front-End Web Development"）。
• 当PHP把JSON输出到页面后，JS看到的代码会变成类似：

  let portfolioData = JSON.parse("[{"services_idno":1,"services_name":"Front-End..."}]");
  

  这里第一个"会和JSON里的第一个"提前闭合字符串，导致JS语法完全混乱，触发错误。

解决方案 #

最简洁且安全的方法是直接把PHP输出的JSON赋值给JS变量，不需要JSON.parse：

<script> let portfolioData = <?php echo $convertData;?>; </script>

为什么这样可行？因为JSON（JavaScript Object Notation）本身就是合法的JavaScript对象字面量，PHP输出的JSON可以直接被JS识别为对象/数组，不需要额外解析。

如果一定要用JSON.parse（比如有特殊场景需求），可以转义JSON里的双引号，或者用单引号包裹PHP输出（但这种方式不如第一种稳妥）：

// 方案二：用单引号包裹PHP输出
<script> let portfolioData = JSON.parse('<?php echo $convertData;?>'); </script>

不过更推荐第一种方案，既避免了引号问题，又省去了解析步骤，效率更高。

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