getJSON loop in Jquery dosent return all objects

Question

I have a specific problem. I have one JSON file that contains all JSON files in a folder. I am iterating through that in a function where i create an array, I take that array and send it to another function where i for each filename in array 1 Iterate through and get all the keys and values of that JSON.

Ex: function1 , Create array from JSON

this is the JSON

[
{"file":"filename1.json"},
{"file":"filename2.json"}
]

this is the function:

function getFiles(c,sectiontype){ //This function triggers BKND asp to get all the files that is in BKND/Codes/ folder, and push out a JSON file under JSON/Codes/ folder.
    // c is the type of code ASP, PS, CMD 
    $.ajax('BKND/'+sectiontype+'.asp');
    var arrFiles=[];
    $.ajax({
        'async': false, //Set to false so that script waits for JSON to load.
        'url': 'JSON/'+sectiontype+'.json', //URL to where to pick up JSON
        'dataType': "json", //datatype
        'success': function (data) { //if it succeeds
            cFiles = data
        }
    });
    putCodeblocks(cFiles)
}

this is the second function where i take the array from first function and iterate through each file anc collect all keys and values and put create the codeblocks in HTML

function putCodeblocks(files){
    let zfiles = files.toString();
    console.log(zfiles)
    $.each(obj, function(key,value) {
      $.getJSON('BKND/Codes/'+value.file, function(data){
        $.each(data, function(index, element) {
            console.log(element.title)
        })
      })
    }); 

}

The first function works. it creates a JS array object, and i have checked that it is transferred to second function... But in second function, i only get the first filename and then the $.each loop stops? why?- What am i missing here?

EDIT: i changed somethings. but get the same result..

function getFiles(c,sectiontype){ //This function triggers BKND asp to get all the files that is in BKND/Codes/ folder, and push out a JSON file under JSON/Codes/ folder.
    // c is the type of code ASP, PS, CMD 
    $.ajax('BKND/'+sectiontype+'.asp');
    var arrFiles=[];
    $.ajax({
        'async': true, //Set to false so that script waits for JSON to load.
        'url': 'JSON/'+sectiontype+'.json', //URL to where to pick up JSON
        'dataType': "json", //datatype
        'success': function (data) { //if it succeeds
            putCodeblocks(data)
        }
    });
    
}

function putCodeblocks(files){   
    console.log(files)
    $.each(files, function(key,value) {
      $.getJSON('BKND/Codes/'+value.file, function(data){
        $.each(data, function(index, element) {
            console.log(element.title)
        })
      })
    }); 

}

Answer 1

I've put everything in a single function.

First I do a single iteration and creates an array with just the filenames. Then in the second iteration i collect the JSON elements from the actual file.

function getCodeFiles(c,sectiontype){ //This function triggers BKND asp to get all the files that is in BKND/Codes/ folder, and push out a JSON file under JSON/Codes/ folder.
    // c is the type of code ASP, PS, CMD 
       $.ajax('BKND/'+sectiontype+'.asp');
       let arrFilez = []
       $.getJSON('JSON/'+sectiontype+'.json', function(filez){
        $.each(filez, function(key,value) {
            arrFilez.push(value.file)
            });
            
        $.each(arrFilez, function(key, filename){            
            $.getJSON('BKND/Codes/'+filename, function(data){
                $.each(data, function(key, value){
                    //console.log(value.title);
                    var codeTtl = value.title
                    var codeDsc = value.desc
                    var codeLnk = 'files/'+value.link
                    $('#PS').append($(
                        '<div class="codeblock">'
                        +'<span class="codeheader"><div class="codetype ps">'+c+'</div>'+codeTtl+'</span>'
                        +'<span class="content smalldesc">'
                        +'<div class="code">'
                        +'<desc>'+codeDsc+'</desc>'
                        +'<button class="mini ui blue icon button" title="open code in new window" data-href="'+codeLnk+'" data-title="'+codeTtl+'" id="codebutton"><i class="code icon"></i></button>'
                        +'</div>'
                        +'</span>'
                        +'</div>'
                    ));
                });
            });
        }); 
    });    
}