Базовый XMLhttprequest для извлечения данных из файла JSON

Question

У меня есть базовый XML-запрос, который получает данные из файла json, хранящегося на моем сервере. Как только запрос загружен, вызывается функция, которая сохраняет responseText в переменной с именем data. Как только данные сохранены, они затем анализируются с использованием JSON.parse и сохраняются в переменную, называемую workouts.

Вот мой js-код:

var data;
var workouts;
    var req = new XMLHttpRequest();
    req.open("GET", "workout-db.json");
    req.onload = function() {
        data = req.responseText;
        workouts = JSON.parse(data);
    }
    req.send();

Вот мой json-код:

[{
    "name": "Pull up",
    "muscleGroup": "upper",
    "imgUrl": "imgs/pull_up.jpg"
},
{
    "name": "Battle rope",
    "muscleGroup": "upper",
    "imgUrl": "imgs/battle_rope.jpg"
},
{
    "name": "Push up",
    "muscleGroup": "upper",
    "imgUrl": "imgs/push_up.jpg"
}
]

Единственная часть, которую я не понимаю, это как получить доступ к этому объекту тренировкив моем коде. Попытка вызвать его возвращает неопределенную переменную. Из того, что я понимаю в области js, переменная тренировки должна быть глобальной и доступной в любом другом месте моего кода.