Check if image exists

I finally got it working yesterday. Instead of creating a for loop, I make the function run itself again each time it receives a response. Of course, this could go on forever. So I built in a variable called "proceed" that is true or false. Once a limit has been reached (such as 10 photos per step) the loop stops. That's more or less how my code is working. It's a nice trick -- when you want to "pause" a function until something happens, just put the function call inside of the function in order to create a loop:

var proceed = true;// change back to false later
var waitUntilFinished = false;

var j = 1;//step
var k = 1;//image
var X = []; // [[chapter1 1,1,1,3,4,1,1,3],[chapter 2, 1,1,1,1,1,2],[chapter 3, 1,1,1]]
var Xm = []; // metadata for X

// Change Image per step
$scope.app.stepImage = function (Achapter=1,Astep=1,Aimg=1){
 $scope.view.wdg['U-20-1']['src'] = 'app/resources/IMAGES/CH-'+Achapter+'_STEP-'+Astep+'_IMG-'+Aimg+'.jpg';
 
 // below is code for finding out if multiple images exist per a step, and if so, showing arrows
 if(Xm[Achapter-1]===undefined){
 waitUntilFinished = true;console.log("**a** X=");console.log(X);
 proceed = true;
 $scope.app.getX(Achapter,Astep,Aimg);
 }
 if(!waitUntilFinished){
 // control visibility of <[]> and image resource
 dispImgArrows(Achapter,Astep,Aimg);console.log("**c**")
 }
}


// Show arrows if multiple images exist per a single step
$scope.app.getX = function(i=1,j=1,k=1){
 var j1=j;var k1=k;//capture original inputs
 if(j>chapters[i-1][4]){console.log("**d**");Xm[i-1]=true;proceed=false;i=1;j=1;k=1;waitUntilFinished=false;$scope.app.stepImage(i,j1,k1)}
 if(X[0]===undefined){
 for(ch=0;ch<chapters.length;ch++){
 X.push([]);Xm.push(undefined);
 for(st=0;st<chapters[ch][4];st++){
 X[ch].push(0);}}}
 if(proceed){
 var name = "CH-"+(i).toString()+"_STEP-"+(j).toString()+"_IMG-"+(k).toString()+".JPG";
 var p = "app/resources/IMAGES/"+name;
 console.log(p);
 $http.get(p).then(successCallback, errorCallback);
 function successCallback(response){
 console.log("i="+i+"\nj="+j+"\nk="+k+"\nX=");
 console.log(X);
 k++;
 X[i-1][j-1]++;
 $scope.app.getX(i,j,k);
 }
 function errorCallback(error){
 k=1;// reset
 j++;// step #
 console.log("chapters =");
 console.log(chapters)
 console.log("i="+i+"\nj="+j+"\nk="+k+"\nX=");
 console.log(X);
 $scope.app.getX(i,j,k);
 }
 }
}

So essentially when you go to a chapter you automatically trigger a function to (1) create an array with sub-arrays for each chapter. (2) populate the sub array for that particular chapter with a list of numbers representing the number of images for each step (3) populate a "meta-data" array Xm that tells you which chapters have been visited and thus the number of images per step has been recorded for them. So for instance, after visiting chapter 2 the variables look something like this X = [[0,0,0,0],[0,0,0,0,0,0,0],[1,1,1,2,1,3,1],[0,0,0,0,0,0,0,0,0,0],[0,0,0,0]] and Xm = [undefined, undefined, true, undefined, undefined]

If you want the simplified version of this (the core functionality for a recursive check) then use this code:

var proceed = true;// change back to false later
var j = 1; //step
var k = 1; //image
var X = []; // [[chapter1 1,1,1,3,4,1,1,3],[chapter 2, 1,1,1,1,1,2],[chapter 3, 1,1,1]]
var Xm = [];
// by the way "chapters" is an array with chapter metadata, and chapters[i][4] tells you the number of steps for chapter # i

// Show arrows if multiple images exist per a single step
$scope.app.getX = function(i=1,j=1,k=1){
// this just creates an array X with placeholders [[0,0,0],[0,0],[0,0,0,0]] and Xm
 if(j>chapters[i-1][4]){;Xm[i-1]=true;proceed=false;i=1;j=1;k=1}
 if(X[0]===undefined){
 for(ch=0;ch<chapters.length;ch++){
 X.push([]);Xm.push(undefined);
 for(st=0;st<chapters[ch][4];st++){
 X[ch].push(0);}}}
	 
 if(proceed){
 var name = "CH-"+(i).toString()+"_STEP-"+(j).toString()+"_IMG-"+(k).toString()+".JPG";
 var p = "app/resources/IMAGES/"+name;
 $http.get(p).then(successCallback, errorCallback);
 function successCallback(response){
 k++;
 X[i-1][j-1]++;
 $scope.app.getX(i,j,k); \\ use this instead of a for loop
 }
 function errorCallback(error){
 k=1;// reset
 j++;// step #
 $scope.app.getX(i,j,k); \\ use this instead of a for loop
 }
 }
}