Converting PHP Array into JavaScript Array Tutorial

In this tutorial, we will tackle about how to Convert PHP Array into JavaScript Array. This tutorial aims to teach new programmers or IT/CS students how to pass array of data from PHP to JavaScript. This topic is sort of similar to our past topic which is Passing PHP Variables into JavaScript Tutorial but this time we'll be passing an array of data and convert it into a JS Array using the 2 best and straight forward way that I can think of.

Why do you need to Convert PHP Array into JavaScript Array?

Convertin PHP Array into JS Array is not a requirement for developing an application. Although, you will need to convert the PHP Arrays to JS for some instances such as the following:

• You need to dynamically manage and control the array of data from your database into the client-side
• Use the array data when executing a JS Function
• and more

These are just some of the reason why you need to convert your PHP Array of data to JS Array. Using the converted array data, you will have more options to control the data to give your end-users a better experience while using your application.

How to Convert PHP Array into JavaScript Array?

There are a lot of ways of converting your Array of data from PHP to JavaScript. Before the conversion, you must Pass the PHP Array Variable first into the JavaScript.

2 ways to Convert PHP array to JS array

Here are the 2 best ways to convert an array of data from PHP to JS. These techniques are commonly used and more effective.

1. Using JS Map Method
2. Using JS For Loop Method

Using JS Map Method

JS Map Method creates a new array by calling a function in each value of your current array. The following snippets are an example of converting an array of data from PHP to JS using the said method.

PHP Script

    <?php 
        $sample_arr1 = [
            "Item 1",
            "Item 2",
            "Item 3",
            "Item 4",
            "Item 5"
        ];
 
        $sample_arr2 = [
            "Value 1",
            "Value 2",
            "Value 3",
            "Value 4",
            "Value 5"
        ];
    ?>
 

JS Script

    var arr1 = [],
        arr2 = [];
 
    var obj1 = JSON.parse('<?= json_encode($sample_arr1) ?>'),
        obj2 = JSON.parse('<?= json_encode($sample_arr2) ?>');
 
    Object.keys(obj1).map(k =>{
        arr1.push(obj1[k])
    })
    console.log("Sample Array #1:", arr1)
 
    Object.keys(obj2).map(k =>{
        arr2.push(obj2[k])
    })
    console.log("Sample Array #2:", arr2)
 

Or

    var arr1 = [],
        arr2 = [];
 
    var obj1 = JSON.parse('<?= json_encode($sample_arr1) ?>'),
        obj2 = JSON.parse('<?= json_encode($sample_arr2) ?>');
 
    arr1 = Object.keys(obj1).map(k => { return obj1[k] });
    console.log("Sample Array #1:", arr1)
 
    arr2 = Object.keys(obj2).map(k => { return obj2[k] });
    console.log("Sample Array #2:", arr2)
 

Using JS For Loop Method

The other way to convert an Array of data from PHP to JS is by using For Loop. Using this, you can store the object data into an array variable by iteration. See the sample snippet below.

PHP Script

    <?php 
        $sample_arr1 = [
            "Item 1",
            "Item 2",
            "Item 3",
            "Item 4",
            "Item 5"
        ];
 
        $sample_arr2 = [
            "Value 1",
            "Value 2",
            "Value 3",
            "Value 4",
            "Value 5"
        ];
    ?>
 

JS Script

    var arr1 = [],
        arr2 = [];
 
    var obj1 = JSON.parse('<?= json_encode($sample_arr1) ?>'),
        obj2 = JSON.parse('<?= json_encode($sample_arr2) ?>');
 
    for(var i = 0; i < Object.keys(obj1).length; i++){
        arr1.push(obj1[i])
    }
    console.log("Sample Array #1:", arr1);
 
    for(var i = 0; i < Object.keys(obj2).length; i++){
        arr2.push(obj2[i])
    }
    console.log("Sample Array #2:", arr2);
 

DEMO VIDEO

That is! You can try the solutions on your end to see how it works. I also provided a simple program that demonstrates how to convert PHP Array into JS Array. The download button is located below this article.

I hope this tutorial will help you with what you are looking for and you'll find this useful for your current and future projects. Explore more on this website for more tutorials and Free Source Codes.