Count console.log objects

Question

The code below prints the console log onto the page. It logs gets and responses from server like:

14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http...
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {..
14:15:17 GMT+0000 (GMT Standard Time) Submitting HTTP GET request to http...
14:15:22 GMT+0000 (GMT Standard Time) Received HTTP response: {..

Instead of displaying these onto the page I would like to count every response and request so you see a a number starting at 1 and ending when it ends, could be any number. This is to show the user that something is happening without showing them all the response and get data.

        function logHttpResponse(response) {
        var now = new Date();
        var logger = document.getElementById('log');
        var logMessage = now.toTimeString() + " Received HTTP response: " + JSON.stringify(response);
        console.log = function (logMessage) {
            if (typeof logMessage == 'object') {
                logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(logMessage) : String(logMessage)) + '<br />';
            } else {
                logger.innerHTML += logMessage + '<br />';
            }
        }
    }

and html:

<div id="log"></div>

Answer 1

If you just want to override console.log to print the count of responses, this should do it, but this will increment the count for any console.log call.

var logCount = 0

console.log = function (logMessage) {
    var logger = document.getElementById('log');
    logCount++;
    logger.innerHTML = logCount;
}

If you want to count on responses and not all console logs, use something like this

var logCount = 0

function logHttpResponse(response) {
    var logger = document.getElementById('log');
    logCount++;
    logger.innerHTML = logCount;
}

Answer 2

Your question is not entirely clear to me, but from what I understand is that you're trying to report on the status of each open http request. I'd suggest you wrap your request with a function that does the counting like this:

var globalCounter = 1;
function performHttpRequest(requestUrl) {
    // Store a local copy of the counter for this request
    var currentCounter = globalCounter++;

    // Log to the user in whatever way you see fit
    // Could also for instance be with an array of status objects
    logger.innerHTML += 'now starting request ' + currentCounter + '</br>';

    // Perform the async request using the framework you prefer
    return $http.get(requestUrl)
        .then(function(result) {
            // When the async request finishes, update the log with the counter
            // we saved earlier
            logger.innerHTML += 'request ' + currentCounter + ' finished</br>';

            // Make sure to return the result of the action to the calling
            // function.
            return result;
        });
}

The example above uses Angular as the framework to perform the actual http request, but it would just a as well work on jQuery or any other framework.