How to send PHP array of images to Javascript array and display them

Question

Noobie here, Apologies if this question is silly,

I have developed a image match game with set of default images, now i want to access random images from directory for the game.The game logic is done in Javascript. I used php to get random 8 images from the directory and the code is as follows.

random.php:

function getRandomImage() {
    $dire="Annotated Dataset/";
    $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
    shuffle($images);
    $imgarray= array_slice($images,1,8);
    echo json_encode($imgarray);
}
die(json_encode(getRandomImage()));

The above displays file names of 8 images, but I want to display these 8 images in the following Javascript file inside if condition

game.js:

function getgImage(number) {
    var ranarray= "<?php echo json_encode($imgarray)?>";
    if(number=='1'){
        return '<img src="'+ranarray[1]+'">';
    }else if(number == '2'){
        return '<img src="'+ranarray[2]+'">';
    }else if(number == '3'){
        return '<img src="'+ranarray[3]+'">';
    }else if(number == '4'){
        return '<img src="'+ranarray[4]+'">';
    }else if(number == '5'){
        return '<img src="'+ranarray[5]+'">';
    }else if(number == '6'){
        return '<img src="'+ranarray[6]+'">';
    }else if(number == '7'){
        return '<img src="'+ranarray[7]+'">';
    }else if(number == '8'){
        return '<img src="'+ranarray[8]+'">';
    }else{
        return '<img src="resources/logo.png">';
    }
}

the above code i tried to get the images from the array in the php file ( random.php) but I am not able to display the images. Can someone provide a solution on how to proceed. I want the image array[1 to 8] from php to be set inside the If condition such that each image from the array is inside seperate if conditions. Kindly help me with this problem.

I advise that you should read into single page application. write a webservice with php and get the filename via ajax with javascript — DubZ, Sep 18 '19 at 12:19
@DubZ can you show me how to do the ajax call. I never used ajax code before... — Uviiii, Sep 18 '19 at 13:33
@DubZ: that was me in the other thread. Here is 2 links: This first explains about AJAX (but uses JQuery, which I do not prefer): https://stackoverflow.com/questions/6009206/what-is-ajax-and-how-does-it-work And here one that explains how to do it without Jquery: https://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery — Erwin Moller, Sep 18 '19 at 14:37

Erwin Moller · Answer 1 · 2019-09-18T12:33:20.430

0

EDIT: Look at DubZ comment herunder for a good clue. :-)

By the looks of it, you return only the imagename:

<img src="'+ranarray[2]+'">

That will result in HTML:

<img src="someimage.jpg">

Check your HTML to see what there is listed for the images.

Solution:

Give the FULL URL. eg:

<img src="http://www.yourgame.com/images/someimage.jpg">

edited Sep 18 '19 at 12:33

answered Sep 18 '19 at 12:13

Erwin Moller

2,375
14
22

I dont think that executing PHP in an external js file will work out of the box isnt it? – DubZ Sep 18 '19 at 12:17
LOL, you are right. His game.js. I hadn't seen that. – Erwin Moller Sep 18 '19 at 12:30
me too in beginning :D – DubZ Sep 18 '19 at 12:31
@DubZ what should i do now. The if condition returns error , – Uviiii Sep 18 '19 at 12:57
1

@Uviiii You are confused about serverside (PHP) and clientside (Javascript, browser). You game.js file is not doing what you expect, eg: calling json_encode($imgarray). Just look at the source you are producing. In your browser look at source. That is the first step to debug. You will see that the PHP is not executed but litterally displayed. Solution: Many. The easiest probably learning how to get info in using xmlhttprequest – Erwin Moller Sep 18 '19 at 13:03

How to send PHP array of images to Javascript array and display them

1 Answers1