How to pass php directory files into javascript array?

Question

I am trying to create an image slideshow from a directory on my local server. I'm using php to access the files using readDir(). I them want to pass the variables into a javascript array to then access whatever feature I want with them. Right now I'm just trying to print them out to the screen, to make sure it works, but I'm not getting anything on the screen at all.

<html>
  <head>
  </head>
  <body>
    <script type = "text/javascript">
      var images = new Array();
<?php
$dp = opendir("img/slideshow");
while($currentFile !== false){
  if($currentFile != "." && $currentFile != ".."){
    $currentFile = readDir($dp);
    echo("images.push('{$currentFile}');");
  }
}
?>
      for(var i = 0; i < images.length; i++){
        document.write("<a href = '" + images[i] + "'>" + images[i] + "</a>");
      }
    </script>
  </body>
</html>

It seemed pretty logical to me. I start out with creating the javascript array, then in the php part, I open, and read the directory then echo out a line of code that pushes the current file into the javascript array. Then it should print out each array item, but I'm getting a blank screen. *Note: if I place the files into a php array and print it out, it works just fine but I can't access the array through javascript and put animations to it*

You have a stray < at the start of your echo that would cause a JS parse error. When you execute this do you get any errors from PHP or in the JS console? — Adrian
– Adrian, Commented Mar 14, 2013 at 17:23
You seem to have an extra < in the following line echo("<images.push('{$currentFile}');");.. You need to remove that. — Steve
– Steve, Commented Mar 14, 2013 at 17:23
I apologize, that's not in my actual code, I misprinted it when typing it here. Sorry. — Vince
– Vince, Commented Mar 14, 2013 at 17:24

idmean · Accepted Answer · 2013-03-14 17:24:42Z

1

You can use json_encode(). For example:

<html>
  <head>
  </head>
  <body>
    <script type = "text/javascript">

<?php
$dp = opendir("img/slideshow");
$arrayjs = array();
while($currentFile !== false){
  if($currentFile != "." && $currentFile != ".."){
    $currentFile = readDir($dp);
    $arrayjs[] = $currentFile;
  }
}
echo "var images = " . json_encode($arrayjs) . ";";
?>

      for(var i = 0; i < images.length; i++){
        document.write("<a href = '" + images[i] + "'>" + images[i] + "</a>");
      }
    </script>
  </body>
</html>

answered Mar 14, 2013 at 17:24

idmean

15k9 gold badges63 silver badges90 bronze badges

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

Comments

user3510753 · Accepted Answer · 2015-05-25 14:39:28Z

0

<?php
$dir="img/slideshow";//set the working directory
$pics= scandir($dir) ;//Makes a array with all the items of the array
unset($pics[0],$pics[1]);//first and second ellement are the "."".." is nesecery to unset!
$string = '<script type ="text/javascript">var images =[ ';
foreach($pics as $key => $item) {
$string.='"'.$item.'",';
}
echo substr($string, 0, -1)."];</script>"; ?>

answered May 25, 2015 at 14:39

user3510753

314 bronze badges

Collectives™ on Stack Overflow

How to pass php directory files into javascript array?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related