How to pass array to PHP via javascript?

Question

I'm wondering how to pass array value to HTML via javascript? I know that we could nicely put it in table for design purposes in PHP script itself then pass to javascript to append onto id="default".

But I prefer to separate design and logic. Therefore how do I process array passed from php via javascript and then append it to HTML?

PHP

try {
 $stmt = $pdo->prepare("SELECT * FROM top_level ORDER BY top_level_order");
 $stmt->execute();
 $result = $stmt->fetchAll();
 $default = array();
 foreach($result as $row)
 {
 $top_level_id=$row['top_level_id'];
 $top_level_name=$row['top_level_name'];
 array_push($default, array("id" => $row['top_level_id'],"item" => $row['top_level_name']));
 }
 $default;
 } 
 catch(PDOException $e) {
 'Error: ' . $e->getMessage();
 }

javacript

$("#clickme").on("click",function()
{
 var xmlhttp = getXmlHttp();
 xmlhttp.onreadystatechange = function () {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 if (this.responseText !== null) {
 var ajaxElm = document.getElementById('default');
 ajaxElm.innerHTML = this.responseText; 
 var item_array=ajaxElm.innerHTML;
 //how to process array retrieved from php script here and then append to id="default"?
 for(var i=0;i<item_array.length;i++)
 {
 var id=item_array[i].id;
 var name=item_array[i].name;
 }
 }
 }
 }
 xmlhttp.open("GET", "selectTopLevel.php");
 xmlhttp.send();
});

HTML

<div class="row">
 <div class="small-12 medium-12 large-12 columns text-center">
 <a href="#" data-reveal-id="myModal" id="clickme" data-reveal>Click Me!</a>
 </div>
 </div>

EDITED script

$("#clickme").on("click",function()
{
 var xmlhttp = getXmlHttp();
 xmlhttp.onreadystatechange = function () {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 if (this.responseText !== null) {
 /* var ajaxElm = document.getElementById('default');
 ajaxElm.innerHTML = this.responseText; 
 var item_array=ajaxElm.innerHTML;
 for(var i=0;i<item_array.length;i++)
 {
 var id=item_array[i].id;
 var name=item_array[i].name;
 }*/
 var data = JSON.parse(this.responseText);
 for (i = 0; i < data.length; i++)
 {
 var id=data[i].id;
 var name=item_array[i].name;
 $("#default").append("name= "+name);
 }
 }
 }
 }
 xmlhttp.open("GET", "selectTopLevel.php");
 xmlhttp.send();
});

• Oka: Where is getXmlHttp defined? Is there a reason you'd use jQuery for event handling, but not take advantage of its AJAX interfaces?
• 112233: @Oka, its defined right above the function that uses getXmlHttp object

Answer 1

Just wrap the data into the JSON format. Something like this:

PHP

$output = array();
try {
 $stmt = $pdo->prepare("SELECT * FROM top_level ORDER BY top_level_order");
 $stmt->execute();
 $result = $stmt->fetchAll();
 foreach($result as $row)
 {
 $top_level_id=$row['top_level_id'];
 $top_level_name=$row['top_level_name'];
 array_push($output, array("id" => $row['top_level_id'],"item" => $row['top_level_name']));
 }
} 
catch(PDOException $e) {
 //'Error: ' . $e->getMessage();
}
echo json_encode($output);

Javascript

$("#clickme").on("click",function()
{
 var xmlhttp = getXmlHttp();
 xmlhttp.onreadystatechange = function () {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 if (this.responseText !== null) {
 var data = JSON.parse(this.responseText);
 // do something with your data
 }
 }
 }
 xmlhttp.open("GET", "selectTopLevel.php");
 xmlhttp.send();
});

Then just loop through the data array and append it to its destination.

• 112233: @Sebabstian, I edited my script as per your suggestion. Can you take a look at my edited post please and see where my mistake is?
• 112233: Yes, just defined $output array and push array into it
• Sebastian Nette: Are you getting any console errors? Is the ajax request working? Can you try console.log(this.responseText) and console.log(JSON.parse(this.responseText)) to confirm if the response is correct?
• 112233: console.log(this.responseText) outputs the array in console but console.log(JSON.parse(this.responseText)) says [object] [object]
• 112233: sorry its my mistake, I used wrong array name..Now it works