I do know how to solve the language/audio issue, but I don't know how to put it together as code

Question

This is my code:

$(document).ready(function() {
$(document).on("click", ".audioButton", function() {
var word = $(this).parent().find('.exerciseWord').html().toLowerCase() + '.mp3';
play(word);
});
getFileArray(); // load on page load
});

function getFileArray(word) {
$.getJSON("https://test.diglin.eu/api/media/fileList", {
  lang: param
  })
  .done(r => {
  audioArray = r.audio;
  console.log("audio data loaded");
  if (word) play(word);
  });
}

function play(word) {
 if (!audioArray) getFileArray(word);
 else {
var foundID = audioArray.lowercase.indexOf(word);
console.log("foundID", foundID);
if (foundID > -1) {
  var audio = new Audio();
  audio.src = 'http://test.diglin.eu/' + audioArray.path + audioArray.files[foundID];
  audio.play();
   }
  }
}

The code I am trying to give to param :

$.getJSON('json_files/jsonData_' + ID + '.json', function(json) {

 var jsonDataLanguage = json.main_object.language;
}

how the JSON (with a unique ID) looks like:

{
"main_object": {
"id": "new",
"getExerciseTitle": "TestToConfirm",
"language": "nl_NL",
"application": "lettergrepen",
"main_object": {
  "title": "TestToConfirm",
  "language": "nl_NL",
  "exercises": [
    {
      "word": "Hallo Marja.",
      "syllables": [
        "hallo",
        "marja",
        "",
        ""
      ]
    }
  ]
},
"dataType": "json"
}
}

So the next thing should happen (but doesn't work when I try so):

I try to access the desired ID in my json file. There in my JSON file I have sent a language with aswell, and it should fetch that language and be the value of param . I tried doing so, but it throws the error: "json is not defined". Most likely because I am not accessing a JSON file with a certain ID. how could I do this? I know this is the problem, but I don't know how to solve it.

Answer 1

Here's the code, with everything not relevant to the error removed. First, the button click handler is assigned, which takes the word and tries to play the corresponding audio. If the audio array isn't loaded yet, getFileArray is called, then the audio is played in the done callback.

If more is to be done, it is advised to move the done() code into a separate function.

EDIT: fixed request format

EDIT2: added 2nd request

var audioArray;
var LANGUAGE, WORDS, audioArray;

$(document).ready(function() {
  $(document).on("click", ".audioButton", function() {
    var word = $(this).parent().find('.exerciseWord').html().toLowerCase() + '.mp3';
    play(word);
  });
  getFileArray(); // load on page load
});

function getFileArray(word) {
  $.getJSON('jsonLanguage/language.json').done(response => {
    LANGUAGE = response.main_object.language;
    WORDS = response.main_object.exerciseGetWordInput;
    $.post("https://test.diglin.eu/api/media/fileList", {
        language: LANGUAGE
      })
      .done(r => {
        audioArray = r.audio;
        console.log("audio data loaded");
        if (word) play(word);
      });
  });
}

function play(word) {
  if (!audioArray) getFileArray(word);
  else {
    var foundID = audioArray.lowercase.indexOf(word);
    console.log("foundID", foundID);
    if (foundID > -1) {
      var audio = new Audio();
      audio.src = 'http://test.diglin.eu/' + audioArray.path + audioArray.files[foundID];
      audio.play();
    }
  }
}