Создание набора массивов из функции и передача его в datatable

Question

Я пытаюсь получить доступ к информации из двух разных источников.

Первый с функцией получения idElement возвращает id .Этот идентификатор используется для доступа к idMoreAtr, который возвращает имя и возраст этого элемента.

Мой план состоял в том, чтобы выполнить итерации по всем элементам idElement,и сохраните имя и возраст в массиве, чтобы затем распечатать его на базе данных.

Однако, когда я пытаюсь, таблица пуста.Я думаю, что это связано с обратными вызовами или областью действия, но я не уверен, что происходит или как это исправить.

Если мы console.log (set) внутри функции, массив работает нормально, но когдаЯ пытаюсь получить доступ к нему за пределами функции, она кажется пустой.

$(window).on('load', function() {
      var  count = 5;
      let set = [];

      function add(name, age) {
        set.push({
          name: name,
          age: age
        });
      };

      for (let i = 0; i < count; i++) {
        idElement.call(i, function(error, id) {
          if (error)
            console.error(error);
          else {
            idMoreAtr(id, function(error, result) {
              if (error) {
                console.log(errorMsg);
                return;
              }
              var name;
              var age;
              name = result[0];
              age = result[1].toNumber();
              add(name, age);
            });
          }
        });
      };

      $('#table').DataTable({
        data: set,
        columns: [{
            title: "Name"
          },
          {
            title: "Age"
          }
        ]
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<table id="table" class="display" width="100%"></table>