Получила данные с помощью ajax, записала в массив чтобы вывести в таблицу с помощью DataTable. В консоле виден массив, но таблица не заполняется. Не могу понять в чем ошибка
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="example" class="display" width="100%"></table>
<script>
let obj = [];
let info = [];
let infoForTables = [];
$.ajax({
method: 'GET',
url: 'https://restcountries.eu/rest/v2/',
success: response => {
for (let i in response) {
obj.push(`${response[i].alpha2Code} ${response[i].flag} ${response[i].name} ${response[i].capital} ${response[i].population}`);
for (let j in obj) {
info = obj[j].split(' ', 6);
}
infoForTables.push(info);
}
}
});
console.log(infoForTables);
$('#example').DataTable({
data: infoForTables,
columns: [
{ title: "Code" },
{ title: "Flag" },
{ title: "Name" },
{ title: "Capital" },
{ title: "Population" }
]
});
</script>
</body>
</html>