CODEWITHSUNDEEP
javascriptjqueryhtmljson
MongoBongoization
MongoBongoization

Reputation: 21

Load JSON data if file exists in directory.

I'm going to do my best to explain this question, But it will no doubt become confusing, I have been looking for about 3 days now with no luck, so its either not possible, or so simple that no one has needed to ask.

Basically, I have a folder in the root of my web server that contains a changing amount of images, What I want to do is scan that folder with jquery and load the images into a html page, which I have accomplished, and it works flawlessly, but I need it to do more,

I have a json file that looks something like this...

[{
    "gamename": "GAME1",
    "gameimage": "GAME1.jpg",
    "orientation": "horizontal"
},
{
    "gamename": "GAME2",
    "gameimage": "GAME2.jpg",
    "orientation": "horizontal"
},

what I need it to do is search the image folder for images, if it finds an image, load it into a html page (which I am able to do at the moment) and then find the corresponding json data for that game image and show it underneath the loaded image.

This is my current code that is scanning the folder and loading jpg images. 

<html>
<head>
    <script type="text/javascript" src="resources/jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="l-content">
    <div class="cell pure-g">
    </div>
</div>
<script>
var dir = "/images/";
var fileextension = ".jpg";
$.ajax({
    url: dir,
    success: function (data) {
        $(data).find("a:contains(.jpg)").each(function () {
            var filename = this.href.replace(window.location.host, "").replace("http:///", "");
            $(".pure-g").append($("<img class=\"game-img\" src=" + dir + filename + "></img><br>"
            ));
        });
    }
});
</script>
</body>
</html>

Any help would be very much appreciated, I know its probably not the most understandable question so I will try to clear anything up if needed.

Upvotes: 2

Views: 2145

Answers (1)

xbakesx
xbakesx

Reputation: 13500

Javascript is a "client-side" language, so it won't ever have (direct) access to the filesystem of your webserver. So I think your best approach would be to have a script on your webserver (php, .net, node or whatever you know) that serves up a json file listing all of the images in the directory for your javascript.

On the webserver you have a script that does the following (pseudo code to follow because I don't know what language will be most helpful):

var returnJson = {};
var dir = "/images/";
while (var file = getNextFileIn(dir)) {
    returnJson.push(file);
}

print(json_encode(returnJson));

You'll want to do some validation that it's you requesting or anyone can see the contents of that directory... but then your jquery can make an ajax request for the script above, and know what's in there.

It sounds like you are PHP-inclined so you could have your webserver file structure look like this:

/www/index.html <- has your current jquery
/www/public/[all your images go here]
/www/public.php <- the php script below

Then public.php might look like this:

$returnJson = array();
$files = scandir('public/'); // You might want this to be an absolute path, if you are playing games with your include path for security reasons

foreach ($files as $file) {
    if (substr($file, 0, 1) == '.') continue; // This skips over invisible files and the current directory and up one directory
    $returnJson[] = $file;
}

echo(json_encode($returnJson)); // This prints out all the files...

Then in your JQuery, you could parse the response, iterate over it and make urls like: http://yourserver.com/public/{entry in $returnJson}

Make sense?

Upvotes: 2

Related Questions