Currently, I am facing an issue with building an array using ajax. The 'test' array is structured correctly, but the 'translations' array has a flawed structure (as seen in my console output).
In Chrome console: https://i.sstatic.net/mslYm.png
In Edge console: https://i.sstatic.net/aEkV8.png
In Firefox console: https://i.sstatic.net/AhTJi.png
I need guidance on what changes to make in my code to align the structure of the 'translations' array with that of the 'test' array.
Below is the function in question:
function translateAllCaptions(dropdownId) {
var selectedLanguageValue = getDropDownSelectedLanguageValue(dropdownId);
var selectedLanguage = "";
var translations = [];
translations.push(["Caption", "Translation"]);
// Get translation language
selectedLanguageValue ? selectedLanguage = getLanguage(selectedLanguageValue) : console.log("Language dropdown error");
// Translate all captions
// Retrieve all captions
var captions = getAllCaptions();
captions.forEach(caption => {
$.ajax({
url: "https://www.googleapis.com/language/translate/v2",
dataType: "jsonp",
data: {
key: "xxxxxxxxxxxxx",
source: 'en',
target: selectedLanguage,
q: caption
},
success: function (result) {
translations.push([caption, result.data.translations[0].translatedText]);
}
});
});
var test = [
['Caption', 'Translation'],
['Software', 'Logiciel'],
['Network', 'Réseau'],
['Hardware', 'Matériel']
]
// Create and download
console.log(test);
console.log(translations);
exportToCsv("Translations.csv", translations);
}