Создайте массив, используя Ajax

Question

Я пытаюсь построить массив, используя ajax.Массив 'test' имеет хорошую структуру, но массив 'translations' имеет плохую структуру (проверьте вывод моей консоли)

Консоль Chrome:

Пограничная консоль:

Консоль Firefox:

Так что я должен изменить в своем коде, чтобы иметь массив 'translations'структура такая же, как у массива 'test' структура

Вот моя функция:

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
// Get 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);  
}

Answer 1

Ваши ajax-запросы запускаются асинхронно.Это означает, что forEach завершает путь до завершения запросов.Но когда вы развернете результат в консоли разработчика, они завершатся, и вы увидите результат.Это действительно вводит в заблуждение.Обходной путь должен ждать их прежде, чем обработать результат.Синтаксис довольно неуклюжий, но он должен работать:

var requests = captions.map(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]);
        }
    }); 
});

$.when.apply($, requests).then(function(deferreds) {
    exportToCsv("Translations.csv", translations);  
})

Если вам нужно вернуть массив translations из этой функции, то вам нужно будет более глубоко участвовать в обещаниях и async-await,но этого достаточно для экспорта.

[Обновление]

Вы написали в своем комментарии, что он не работает.Тогда вы делаете что-то еще не так.Поскольку у меня нет остальной части вашего кода и вашего ключа API, я подготовил простую демонстрацию ниже.Он использует API, который просто повторяет запрос.Но, как вы увидите, запись в консоль происходит только после завершения всех трех запросов, и в массиве будет три элемента.

let sources = ['blue','red','green'];
let results = [];

let requests = sources.map(color => $.getJSON(`http://mockbin.org/request?color=${color}`).then(r => results.push(r.queryString)));

$.when.apply($, requests).then(() => console.log(results));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>