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

Where is getXmlHttp defined? Is there a reason you'd use jQuery for event handling, but not take advantage of its AJAX interfaces? — Oka
– Oka, Commented Jun 25, 2015 at 4:44
@Oka, its defined right above the function that uses getXmlHttp object — 112233
– 112233, Commented Jun 25, 2015 at 4:52

Sebastian Nette · Accepted Answer · 2015-06-25 04:39:12Z

2

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.

answered Jun 25, 2015 at 4:39

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

112233 Over a year ago

@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 Over a year ago

Yes, just defined $output array and push array into it

Sebastian Nette Over a year ago

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 Over a year ago

console.log(this.responseText) outputs the array in console but console.log(JSON.parse(this.responseText)) says [object] [object]

112233 Over a year ago

sorry its my mistake, I used wrong array name..Now it works

Collectives™ on Stack Overflow

How to pass array to PHP via javascript?

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related