Question

Problem: Trying to use ‘dynamic’ variables to access JSON/JavaScript arrays.

# EXAMPLE #

Instead of… array1[ ] or array2[ ] or even array9000[ ]

Somthing like… var my_array = ‘array’ + ‘some generated number’ ;

Then just… my_array[ ] or my_array[some number]

BUT this does’nt work… (sollution NOW at bottom)

---

I have some PHP that’s reading some directories PLUS there contents to create JSON arrays. The JSON arrays are named sequentially and they are storing image directories…

Example JSON Array Names: images0, images1, images2, etc…

    <?php
        $dir = opendir(getcwd());
        $num=0;
        while($folder = readdir($dir)) {
            if($folder !== '.' && $folder !== '..'){
                if (is_dir($folder)) {
                    echo '<script type="text/javascript">';
                    $folderCHILD = opendir($folder);
                    while($image = readdir($folderCHILD)) {
                        if($image !== '.' && $image !== '..'){
                            $images[]=$folder."/".$image;
                        }
                    }
                    closedir($folderCHILD);
                    echo 'images'.$num.' ='.json_encode($images);
                    unset($images);
                    echo '</script>';
                    $num++;
                }
            }
        }
        closedir($dir);
    ?>

Then I have some Javascript/Jquery that’s ‘attempting’ to access these sequentially named JSON arrays through a click function. The function will create an image using the image directories stored in the JSON arrays.

<script type="text/javascript">
    $(document).ready(function() {
        $('something').click(function() {
            var indexCURRENT = $(this).index();
            var ARRAY = 'images'+indexCURRENT;
            $(document.createElement("img")).attr({ src: ARRAY[some number]}).addClass("image").appendTo('body');
        });
    });
</script>

^The Above Javascipt/Jquery Doesn’t Work^

But Thanks to dev-null-dweller this bit of code does work…

<script type="text/javascript">
    $(document).ready(function() {
        $('#gallery_link p').click(function() {
            var indexCURRENT = $(this).index();
            var ARRAY = 'images'+indexCURRENT;
            $(document.createElement("img")).attr({ src: window[ARRAY][some number]}).addClass("image").appendTo('body');
        });
    });
</script>

The Difference?

.attr({ src: window[ARRAY][some number]})

Answer 1

Quick answer: your numerated variables should be accessible in window object, accessed like array (window['images1']) so simply changing

{ src: ARRAY[1]}

to

{ src: window[ARRAY][1] }

should make it work.

Proper answer: use arrays / objects, it’s simple as this:

<script>
echo '<script type="text/javascript">';
echo 'images = [];';
$folderCHILD = opendir($folder);
while($image = readdir($folderCHILD)) {
    if($image !== '.' && $image !== '..' && $folder !=='resource'){
        $images[]=$folder."/".$image;
    }
}
closedir($folderCHILD);
echo 'images.push('.json_encode($images).');';
echo '</script>';

And then:

{ src: images[indexCUR][1] }