How to get a image array from PHP to Javascript

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 images from directory. 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:

 <?php $dire="Annotated Dataset/";
 $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
 shuffle($images);
   echo 'json_encode(array_slice($images,0,8))';
 ?>

I want to use the images in the above array in the Javascript function which has switch case. I wanted to use each image from array inside the switch case:

Game.js:

 function getgImage(number) {
 $.ajax({
      url: "random.php",
      type: "post",
      datatype: "json",
      data: {},
      success: function (response) {

         // You will get response from your PHP page (what you echo or print)
      },
      error: function(jqXHR, textStatus, errorThrown) {
         console.log(textStatus, errorThrown);
      }
    });


   if(number=='1'){
   return ranarray[0];
   }
   else if(number == '2'){
   return ranarray[1];
   }

   else if(number == '3'){
   return ranarray[2];
   } 

   else if(number == '4'){
   return ranarray[3];
   }

   else if(number == '5'){
   return ranarray[4];
   }

   else if(number == '6'){
   return ranarray[5];
   }

   else if(number == '7'){
   return ranarray[6];
   }

   else if(number == '8'){
   return ranarray[7];
   }
   else {
   return '<img src="resources/logo.png">';

   }
   }

I tried something like in the above code, but I am not able to get the images in the switch case. Can someone help me with this problem.

I need the array of 8 images from php to be inside switch case of the javascript file, each image for each case. Kindly help me with some solution. Thank you in advance

echo 'json_encode(array_slice($images,0,8))'; remove quotation — ANIK ISLAM SHOJIB
– ANIK ISLAM SHOJIB, Commented Sep 18, 2019 at 9:44
@anikislamShojib i tried by removing the quotation, but still the output is same, I get string value, instead of images (i.e., i get alphabet e,p,h etc instead of images) — Uviiii
– Uviiii, Commented Sep 18, 2019 at 10:27

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

You can use Ajax to fetch them from PHP and use them in JavaScript.

Tip: die(json_encode(getgImage(1));

imagefetcher.php

function getRandomImage() {

  $dire   = "Annotated Dataset/";
  $images = glob($dire. '*.{jpg,jpeg}', GLOB_BRACE);
  $images = shuffle($images);

  return $images[rand(0, (count($images) - 1))];

}

die(json_encode(getRandomImage()));

game.js

<script>
 $.ajax({
        url: "imagefetcher.php",
        type: "post",
        data: {},
        success: function (response) {
           // You will get response from your PHP page (what you echo or print)
           alert('Response from PHP file: ' + response);
        },
        error: function(jqXHR, textStatus, errorThrown) {
           console.log(textStatus, errorThrown);
        }
    });
</script>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 18, 2019 at 9:42

Thrallix

7315 silver badges21 bronze badges

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

8 Comments

Uviiii Over a year ago

CAn you show me how to use this ajax in my code, i never used it before. I will be helpful for me.

Thrallix Over a year ago

Simply just add it between <script> tags and link url to your php file which will provide the ajax request of the result it needs. It will output a json response (response in the success function) with the data you sent from PHP.

Jordi Jordi Over a year ago

He said javascript, this solution is with the library Jquery. He could do the same with

var xhr = new XMLHttpRequest();       xhr.open("POST", "https://www.mywebsite.com/test.php");       xhr.send(); if (xhr.readyState == 4)   if (xhr.status == 200)     var your_array_answer = xhr.responseText;

Uviiii Over a year ago

So i add this ajax code, and inside the function response{ echo 'json_encode(array_slice($images,0,8))'; } and later in the switch case i return $images[i].... Was I correct ? ..

Uviiii Over a year ago

@AaronNoHuanKnows I understood the idea u suggested but i dont how to implement it, If i echo the images in the php and use ajax call in javascript file, how to get the images inside the if condition. I have updated the code, Can u please show a snippet of code how to use them inside the if conidtion

|

Collectives™ on Stack Overflow

How to get a image array from PHP to Javascript

1 Answer 1

imagefetcher.php

game.js

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

imagefetcher.php

game.js

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related