0

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.

D.Sof
  • 119
  • 1
  • 10
  • Assuming that the code at the top is the contents of `getFileArray`, that ajax call runs asynchronously. Which means right after `getFileArray("SomeLanguage");`, your `MEDIAARRAY.audio` is still `undefined`. Hence the error. You basically have to move all the `foundID` stuff into the `done` of your ajax call, or put it in a function and call that inside `done`. –  Jun 22 '18 at 13:41
  • See here: https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call –  Jun 22 '18 at 13:42
  • Can I create a function around the $(document).ready? and you said "You basically have to move all the foundID stuff into the done of your ajax call (...)", so I can have all of the code basically put into the done function instead of a $(document).ready ? EDIT: I created a function and placed that inside of my ajax, but it still throws in the error. – D.Sof Jun 22 '18 at 19:21

1 Answers1

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();
    }
  }
}
  • You sir, are one hell of a man. I praise you to heaven for what you have done that was worth 2 weeks of suffering for me. my grattitude towards you is immeasurable. thank you – D.Sof Jun 25 '18 at 07:13
  • Would you mind if I were to ask you something related to the audio? (I know it's a bit late and stuff). But in my CMS I insert the language English, but in the front-end (user side) it only fetches dutch. Whenever I try to declare that the variable param should be the language fetched from my JSON it throws an error of undefined.`var jsonDataLanguage = json.main_object.language;` I am trying to declare that and then assign it to `param`. Any idea how this can be done without having the undefined error thrown in? Again, I know it's a late question. my apologies. – D.Sof Jun 26 '18 at 13:34
  • if possible I would like to start a chat or anything with you, it seemed a bit off topic to edit this post to something else or create a whole new post for it. – D.Sof Jun 26 '18 at 13:55
  • @D.Sof What exactly is the API expecting? You originally sent a POST request containing a language parameter; I tried to replicate it but the reply never changes. I always get tons of Dutch audio. –  Jun 26 '18 at 15:26
  • Well, when I change the language selector on the CMS side, it should change the language to the desired language on the user end aswell. but it only keeps the language on dutch. I thought maybe because I hadnt seen the param = "some language"; and that I had to change the "some language" to the fetched language data of my json. – D.Sof Jun 26 '18 at 15:50
  • https://stackoverflow.com/questions/51046009/how-can-i-prevent-uncaught-referenceerror-json-is-not-defined-when-im-trying I made a post about it @Chris G maybe that will clear things up for you? appreciate the effort tho. – D.Sof Jun 26 '18 at 15:55
  • @D.Sof Again: what is the API expecting? Requesting `https://test.diglin.eu/api/media/fileList` will run a script on the server which compiles the JSON. If this script expects a language param (and defaults to Dutch), in *what format* does it expect the param? GET or POST? Is the param called `language`? What is a valid value? `english` or `en_US`? Etc. Your other question is useless right now, we need to know the API spec. –  Jun 26 '18 at 16:06
  • it expects a POST. valid value for english would be en_EN, in all honesty I can't say wheter the param is called language. I wanted to assign a value to param where it would fetch it from my JSON therefore so the param would be a valid isoName. I did however give it getFileArray this as parameter where I have all the valid languages insterted: – D.Sof Jun 26 '18 at 16:41
  • `function getLanguage() { $.ajax({ url: 'jsonLanguage/language.json', type: 'GET', datatype: 'json' }).done(function(response){ console.log(response); LANGUAGE = response.main_object.language; WORDS = response.main_object.exerciseGetWordInput; getFileArray(LANGUAGE); }); }` – D.Sof Jun 26 '18 at 16:41
  • @D.Sof Ah, `en_EN` works. I changed my answer accordingly. If you're getting the language from another JSON, it needs further changes. –  Jun 26 '18 at 16:51
  • YES, EXACTLY. Now I need it to fetch my JSON data. param should be based on the the language coming from the JSON data. The link I send you shows it a bit more explained. Chris, I know this means nothing to you coming from some dude far away over the internet. But you truly (as shit as I explained) are one of a kind of stackoverflow. I appreciate the the time and effort you put into this stuff very, very, very much. – D.Sof Jun 26 '18 at 20:57
  • @D.Sof No problem, you're welcome :) I edited my answer; it can no longer work live, but I made the necessary changes and it should work as-is. –  Jun 27 '18 at 00:27
  • It completely fell out of working(?) My last request is this Chris (I know where the problem is, I only don't know how to make it work) each exercise has it's own unique ID where I send the language with aswell. It should fetch the ID and then based on the ID go into my JSON fetch that language for the words. I need that as a parameter. but whenever I try it displays: "Uncaught ReferenceError: json is not defined" and I have no idea how so. I editted my post above so you can see what I mean. – D.Sof Jun 27 '18 at 07:17
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/173870/discussion-between-chris-g-and-d-sof). –  Jun 27 '18 at 09:41