PDA

View Full Version : php to Javascript array (MySQL values)



Ceeege
11-07-2008, 03:27 PM
Hi folks,

Iím trying to implement and adapt a JavaScript slideshow script Iíve found to populate a JavaScript array with image information from a database rather than using a set of hard coded pre-defined values. My web pages are php and I can quite happily build the php array from MySQL which contains the image information Iíd like to display in the slideshow.

Basically, Iím trying to populate the JavaScript array slides into the same format as is displayed at the bottom of this post from a MySQL Query via php to ultimately output a slideshow webpage but really struggling with no JavaScript knowledge and only the php Iíve absorbed so far. How do I get the array elements into JavaScript? I know Iím going to need a php loop to assign the php array values into the JavaScript array somehow but quite how itís done I have no idea. Iíd really appreciate a solution over tips as Iíve been banging my head against a brick wall over this for far too long now!

Thanks in advance,

Chris.


<html>
<title>Php/MySQL Array to JavaScript Array</title>
<head>

<?php

$dbQuery = 'SELECT BirdPics_Filename,BirdPics_Species,BirdPics_Page FROM ' .$SQLWhere;
$dbResult = mysql_query($dbQuery) or die ("Could not read data because " . mysql_error());
$RowCount = mysql_numrows($dbResult);

$dbCount = 0;

while ($slides = mysql_fetch_assoc($dbResult))
{
echo "Count : $dbCount <br>" .
"Species : {$slides['BirdPics_Species']} <br>" .
"Link : {$slides['BirdPics_Page']}<br>" .
"Image : {$slides['BirdPics_Filename']} <br><br>";
$dbCount ++;
}

?>

</head>

<body>

<!-- Call JavaScript Slideshow Here -->

</body>
</html>


Sample Output from the above
============================
Count : 0
Species : Redstart
Link : Birds_CWA_Redstart.php
Image : Birds/18ChatsWrensAccentors/Redstart/2008-05-24_Redstart_02.jpg

Count : 1
Species : Firecrest
Link : Birds_WarblersFlycatchers_Firecrest.php
Image : Birds/20WarblersFlycatchers/Firecrest/2008-03-02_Firecrest01.jpg

Count : 2
Species : Redstart
Link : Birds_CWA_Redstart.php
Image : Birds/18ChatsWrensAccentors/Redstart/2008-05-24_Redstart_01.jpg

etc...

Count : 11
Species : Bullfinch
Link : Birds_FinchesBuntings_Bullfinch.php
Image : Birds/25Finches/Bullfinch/2008-04-16_Bullfinch_01.jpg


How and where do I Populate a Javascript array slides from the php array $slides to give:

===========================================================================================

slides[0] = ["Birds/18ChatsWrensAccentors/Redstart/2008-05-24_Redstart_02.jpg", "Redstart", "Birds_CWA_Redstart.php"];

slides[1] = ["Birds/20WarblersFlycatchers/Firecrest/2008-03-02_Firecrest01.jpg", "Firecrest", "Birds_WarblersFlycatchers_Firecrest.php"];

Up to ...

slides[$dbcount] = ["Birds/25Finches/Bullfinch/2008-04-16_Bullfinch_01.jpg", "Bullfinch", "Birds_FinchesBuntings_Bullfinch.php"];

Jesdisciple
11-07-2008, 08:09 PM
First, I suggest this alternative format for each result, because it's more descriptive of what the data being accessed is:
{ image: 'Birds/20WarblersFlycatchers/Firecrest/2008-03-02_Firecrest01.jpg', species: 'Firecrest', link: 'Birds_WarblersFlycatchers_Firecrest.php' };However, that format requires that you tweak your slideshow script a bit to access the values via properties (or string indexes) rather than numerical indexes. (In both formats, the indexes of the outer array are automatically determined by the JS engine.)

For how these loops work, see Arrays (http://www.php.net/manual/en/language.types.array.php#language.types.array.syntax.modifying) and implode (http://us3.php.net/manual/en/function.implode.php).

Here's a while loop that outputs my format:

while ($slides = mysql_fetch_assoc($dbResult))
{
$array[] = "{ image: {$slides['BirdPics_Filename']}, species: {$slides['BirdPics_Species']}, link: {$slides['BirdPics_Page']} }";
}
echo 'var slides = [' . implode(', ', $array) . '];';

And this one outputs yours:

while ($slides = mysql_fetch_assoc($dbResult))
{
$array[] = "[ {$slides['BirdPics_Filename']}, {$slides['BirdPics_Species']}, {$slides['BirdPics_Page']} ]";
}
echo 'var slides = [' . implode(', ', $array) . '];';

Ceeege
11-17-2008, 11:15 PM
Many thanks for getting back to me on this. It's making more sense now but I'm still a bit confused on it. Can I send you my source and let me know what I'm doing wrong?

I think I may be too ambitious with what I'm trying to ultimately achieve!