forEach возвращает undefined после перебора массива, полученного из БД Web Sql

Question

Вот код получения данных из БД и записи их в массив:

/*...*/
db.init.getArrOrder = function () {

        var database = db.init.db;
        var arr = [];

        database.transaction(function(tx){

            tx.executeSql("SELECT * FROM ClientsAll", [], function(tx,result){

                arr.splice(0,arr.length);

                for (var i=0; i < result.rows.length; i++) {

                    var obj = {

                        orderNumber: result.rows.item(i).get_numberOrder,
                        todayDate: result.rows.item(i).get_date
                    };

                    arr.push(obj);
                }

            });
            clientBD.numberOfOrder(arr);
        });
    };
/*...*/

Вот функция, которая получает этот массив:

  numberOfOrder: function (arr) {

            var arr = arr;

            console.log(arr);

            console.log(arr.forEach(function (item, i) {

                console.log(item);
            }));

           // arr.forEach(function (item, i) {
           //
           //     console.log(item);
           // });
        },

И вот в чем вся соль - массив не пустой, первый консоль.лог выводит массив, а второй - undefined. Почему undefined, если там есть объекты со свойствами?

Answer 1

Все функции WebSQL асинхронные. Данные можно брать только внутри функции обработчика результата. Т.е. вызов функции executeSql() отправляет запрос в базу и тут же возвращает управление. В итоге строка clientBD.numberOfOrder(arr); выполняется еще до того, как получены данные.

Используйте результаты внутри функции обработчика ответа БД:

     tx.executeSql("SELECT * FROM ClientsAll", [], function(tx,result){
            ... формирование arr ....
            clientBD.numberOfOrder(arr);
        });

При этом консоль отладки ведет себя неожиданно, вы успеваете увидеть уже готовый результат, когда печатаете просто console.log(arr). Но сравните как именно он его печатает. Если вы сделаете массив и тут же примените console.log то увидите сначала строку [содержимое массива] а при ее разворачивании уже по элементам. Тут же вы видите пустые [], в момент вывода массив был еще пуст ! Но в момент когда вы его мышкой разворачиваете в нем уже есть данные ...