Passing an array variable from PHP to Javascript on the same page

Hi all,

Trying to pass an array from PHP to javascript. Here's what I've got so far, but no luck.

<!-- Scripts (JSP and PHP) to populate dropdown menu and display html results below -->
<?php

$sql="SELECT DISTINCT(category) FROM data"; 
$result=mysql_query($sql); 
[COLOR="red"]$array_num = mysql_num_rows($query);[/COLOR]

$array_cat;
for ($i=0; $row=mysql_fetch_array($result); $i++)
{
	[COLOR="red"]$array_cat[$i] = $row["category"];[/COLOR]
}
?> 

<script type="text/javascript">
[COLOR="red"]array_rows = <?php echo $array_num; ?>;
for (int w=0; w < array_rows; w++)
{
	array_cats[w] = <?php echo $array_cat[w]; ?>;
}[/COLOR]

	function SetHTML2(type) {
		for (int j = 0; j < array_rows; j++)
		{
		  document.getElementById([COLOR="red"]array_cats[w][/COLOR]).style.display = "none"
		 <!--  document.getElementById("common").style.display = "none"-->
	  	}
	  // Using style.display="block" instead of style.display="" leaves a carriage return
	  document.getElementById(type).style.display = ""
	}
</script>

Code (markup):

I'll post the rest of my script if needed. But basically I'm trying to read categories from a MySQL database, populate a dropdown menu dynamically with these, have the menu display/clear html below which submits more queries to get particular data from the server.

TLDR: Need to pass a PHP array variable ($array_num and $array_cat) to javascript so I can use the values they hold in the script to populate/clear the html.


Thanks in advance!

 

http://www.json.org/

 

^Thanks, I'm gonna take a look at it now.

I've also updated my code a bit. Works a lot better, but problem is it keeps copying the same value form PHP variable to the Javascript variable (server/client issues). Basically, the array won't increment when copying the values from the PHP side. Any ideas how to fix? The variable controlling this right now is $x.

<?php

$sql="SELECT DISTINCT(category) FROM data"; 
$result=mysql_query($sql); 
$array_num = mysql_num_rows($query);

$array_cat;
for ($i=0; $row=mysql_fetch_array($result); $i++)
{
	$array_cat[$i] = $row["category"];
	
}
?> 

<script type="text/javascript">
[COLOR="red"]array_rows = "<?php echo $i; ?>"; 
document.write(array_rows);
var array_cats = new Array();
for (var w=0 <?php $x=0; ?>; w < array_rows; w++ )
{
	array_cats[w] = "<?php echo $array_cat[$x]; ?>";
	document.write("<?php echo $x; ?>");
	document.write(array_cats[w]);
	<?php $x++; ?>
}[/COLOR]


	function SetHTML2(type) {
		for (var j = 0; j < array_rows; j++)
		{
		 document.getElementById(array_cats[j]).style.display = "none"
		 //document.getElementById("all").style.display = "none"
		 //document.getElementById("released").style.display = "none"
		 //document.getElementById("common").style.display = "none"
		 //document.getElementById("hardware").style.display = "none"
		 //document.getElementById("software").style.display = "none"
	  	}
	  // Using style.display="block" instead of style.display="" leaves a carriage return
	  document.getElementById(type).style.display = ""
	}
</script>

Code (markup):

 

that's because PHP is executed before javascript. Those are two seperate processes and you are mixing them. PHP is executed on the server, which is then dished to the browser, which executes the javascript.


so this code right here:

array_rows = "<?php echo $i; ?>"; 
document.write(array_rows);
var array_cats = new Array();
for (var w=0 <?php $x=0; ?>; w < array_rows; w++ )
{
	array_cats[w] = "<?php echo $array_cat[$x]; ?>";
	document.write("<?php echo $x; ?>");
	document.write(array_cats[w]);
	<?php $x++; ?>
}

Code (markup):

becomes this, before the javascript part is executed:

array_rows = "18"; 
document.write(array_rows);
var array_cats = new Array();
for (var w=0  w < array_rows; w++ )
{
	array_cats[w] = "cat1";
	document.write("1");
	document.write(array_cats[w]);
}

Code (markup):

and well, that stuff in your for() loop is now static. What you want is a foreach(), in php, echoing out the javascript defining the variables you need, like so (this is only a proof of concept to get the point accross):

<script type="text/javascript">
var array_cats = new Array();
<?php
 $i = 0;
 foreach($array as $key => $var) {
  echo "array_cats[".$i."] = '".$var."';\n";  
  $i++;
 }
?>
</script>

Code (markup):

 

Sweet, thanks for the reply dude. I understand the problem a lot better now. I'm not sure if your code was intended to produce a working example, but I tried to run this, and I keep getting 0 for $i.

<script type="text/javascript">
	<?php
		 $i = 0;
		 foreach($array as $key => $var) {
		  echo "array_cats[".$i."] = '".$var."';\n";  
		  $i++;
		 }
	?>
	var check = "<?php echo $i; ?>";
	document.write(check);
</script>

Code (markup):

Is there not any way to embed php code in javascript besides the simple 1-line:

var jspvariable = "<?php echo $phpvariable; ?>"; 

Code (markup):

? Perhaps by including another file?