Converting a PHP object array to a JavaScript object array

Question

First, I retrieve the data from the database using PHP oop called it $details. $details contain several object array totally about 7. Each object array has a PHP object fields are service_idno, service_name, service_desc, service_image.

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

echo $convertData;

Data:

[{"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"}]

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

JavaScript ERROR:

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

What am I doing wrong?

The better concept is having a dedicated javascript doing a fetch request to php. — Markus Zeller
– Markus Zeller, Commented 10 hours ago

knittl · Accepted Answer · 2026-02-28 19:03:05Z

Your string already contains valid Javascript/JSON. You don't need to parse it again. Let's simplify it a bit and look at where it might go wrong:

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

Now, let's look at your script tag:

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

When rendered, this will result in the following content being sent to the browser:

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

Do you see the problem?

So you have two options:

Properly escape/encode your string to a JSON string and parse it as JSON
Don't parse it, since it already is valid JSON

I suggest option 2:

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

Rendered output:

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

Collectives™ on Stack Overflow

Converting a PHP object array to a JavaScript object array

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related