首先，我使用PHP的面向对象编程（OOP）从数据库取数据，并把结果存储在名为 $details 的变量中。$details 的结果是一个由若干对象组成的数组，通常总数大约有7 个。每个对象内部包含属性 service_idno、service_name、service_desc 和 service_image。示例：

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

echo $convertData;

数据：

[{"services_idno":1,"services_name":"Front-End Web Development","services_desc":"We Can build a great looking website for your business to advertise your products and\\/or services.","services_image":"front.webp"},{"services_idno":2,"services_name":"Back-End Web Development","services_desc":"Back-end development refers to the server-side aspect of web development, focusing on creating and managing the infrastructure that powers website or web applications behind the scenes.","services_image":"back.webp"},{"services_idno":3,"services_name":"Content Management System","services_desc":"CMS website is setup so a person can control the content on the website. It uses Front-End & Back-End Development.","services_image":"cms.webp"},{"services_idno":4,"services_name":"Full-Stack Web Development","services_desc":"Full Stack Development refers to the end-to-end process of building and managing both the front-end (client-side) and back-end (server-side) components of web applications.  It encompasses all layers of a digital product, from user interface design and interactive elements to server logic, database integration, and deployment.","services_image":"full.webp"},{"services_idno":5,"services_name":"Application Development","services_desc":"Application development is the comprehensive process of planning, designing, creating, testing, deploying, and maintaining software applications to meet specific business needs or solve user problems.  It spans multiple platforms\\u2014including mobile, web, and desktop\\u2014and involves a structured lifecycle with distinct stages: planning and requirements gathering, design (including UI\\/UX), development (front-end and back-end coding), testing and optimization, deployment, and ongoing maintenance and updates.","services_image":"app.webp"},{"services_idno":6,"services_name":"Computer Repair","services_desc":"Computer repair refers to the process of diagnosing, troubleshooting, and resolving issues affecting a computer\\t's functionality, performance, or hardware components.  It encompasses both hardware and software fixes, including replacing faulty parts like hard drives, RAM, motherboards, or power supplies, as well as resolving software problems such as operating system errors, malware infections, driver conflicts, and performance slowdowns.","services_image":"repair.webp"},{"services_idno":7,"services_name":"Technical Support","services_desc":"Technical support is a service that assists end users in resolving issues with technology products such as computers, software, hardware, and networks.  Its primary goal is to restore functionality, minimize downtime, and ensure users can effectively utilize their technology.","services_image":"support.webp"}]

这将在一个HTML的 <script> 元素中初始化一个JavaScript变量：

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

但这导致如下JavaScript错误被抬起：

Uncaught SyntaxError: missing ) after argument list prodigital-public.local:55:36

我到底哪里做错了？

解决方案

你的字符串已经包含有效的Javascript/JSON。你不需要再对它进行解析。让我们稍微简化一下，并看看可能在哪儿出错：

echo $convertData; // [{"services_idno":1,"services_name":"Front-End Web Development"}]

现在，我们来看看你的脚本标签：

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

渲染后，这将向浏览器发送以下内容：

<script>
let portfolioData = JSON.parse("[{"services_idno":1,"services_name":"Front-End Web Development"}]");
</script>

你看到了问题吗？

因此你有两个选项：

1. 将你的字符串正确转义/编码为一个JSON字符串，并将其解析为JSON
2. 不要解析它，因为它本来就是有效的JSON

我建议选第2 种：

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

渲染输出：

<script>
let portfolioData = [{"services_idno":1,"services_name":"Front-End Web Development"}];
</script>

（现在这是有效的JavaScript，应该能够执行。）

当然，以上全部前提是你的 <script> 元素包含额外的JS代码。仅仅给变量赋值后不再使用它，在浏览器中不会产生任何效果。