How to Convert PHP Array to Javascript Object

by

To convert PHP Array to JavaScript Object, convert PHP array to json using json_encode() method and then convert JSON to JavaScript using JSON.parse() method. The json_encode() is a built-in PHP method that takes an array as an argument and returns a valid javascript object notation (JSON) string. The JSON.parse() is a built-in method that converts JSON to JavaScript Object.

In this article, we convert three types of arrays into JavaScript objects.

  1. associative array
  2. multi-dimensional array
  3. indexed arrays

Convert associative array to JavaScript object

An associative array refers to a string as an index in the array. We store the value in a key-value pair in this array type rather than some linear type. We convert our php associative array into a Javascript object by the json_encode() and JSON.parse() methods.

Write the following code inside the app.php file.

<?php

$arr = array( "apple" => 1, "tomato" => 2, "banana" => 3);
echo(json_encode($arr)."\n");

Output

{"apple":1,"tomato":2,"banana":3}

Next, write the following code inside the app.js file.

const getJsonArray = async () => {
 
  // We get an json threw this fetch request
  
  let res = await fetch("url");
  if(res.status === 200){
  const obj = JSON.parse(res.arr_json);
     return obj;
  }
}
getJsonArray();

In this example, we are sending a network request to a remote URL, and if it is successful, we will get the data and convert that data to an object using the JSON.parse() method.

Convert multi-dimensional array to JavaScript object

Multi-dimensional array storing one or more arrays inside it. It is more complex than a normal array.

See the following code inside the app.php file.

<?php

 $arr = array();
 for($i = 0; $i < 3; $i++){ 
    $arr["fruit" . $i] = array("apple" => $i + 1, "tomato" => $i + 2, "banana" => $i + 3); 
 } 
echo(json_encode($arr));

Output

{"fruit0":{"apple":1,"tomato":2,"banana":3},
 "fruit1":{"apple":2,"tomato":3,"banana":4},
 "fruit2":{"apple":3,"tomato":4,"banana":5}}

We convert our multidimensional array into the json string in the above example. After that, we can easily convert them into the Javascript object using the JSON.parse() method. You can see in the example1 that we convert our json string into the Javascript object.

Convert indexed array to JavaScript object

The indexed array is represented as a number by default. It starts with 0. The indexed array can store a number, object, or string. The index represents a number. That’s why it’s also known as a numeric array.

See the following app.php file.

<?php

$arr = array("tomato" => array(1, 2, 3), "apple" => array(4, 5, 6)); 
echo( json_encode($arr));

Output

In the above example, we convert an indexed array into json and convert them into a javascript object easily by using JSON.parse() method.

That’s it for this tutorial.

      More tutorials

      How to filter an array with multiple conditions in JavaScript

      How to Get Index of an Object in Array in JavaScript

      How to Convert Object to Array of Objects in JavaScript

      Leave a Comment