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();
});

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.