18

I'm creating a page to help diagnose the problem our users are experiencing with our web pages (you know, asking a user "What browser are you using?" usually leads to "Internet").

This page already submits to me all the HTTP headers and now I'm trying to have JavaScript give some more informations, so I thought it would be great to have the user's navigator JavaScript object and I started looking how to serialize it so I can submit it through a form.

The problem is I'm not able to serialize the navigator object using any JSON library I know of, everyone returns an empty object (?!), so I decided to write an ad-hoc serializer.

You can find the code here:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            function serialize (object) {
                var type = typeof object;
                if (object === null) {
                    return '"nullValue"';
                }
                if (type == 'string' || type === 'number' || type === 'boolean') {
                    return '"' + object + '"';
                }
                else if (type === 'function') {
                    return '"functionValue"';
                }
                else if (type === 'object') {
                    var output = '{';
                    for (var item in object) {
                        if (item !== 'enabledPlugin') {
                            output += '"' + item + '":' + serialize(object[item]) + ',';
                        }
                    }
                    return output.replace(/\,$/, '') + '}';
                }
                else if (type === 'undefined') {
                    return '"undefinedError"';
                }
                else {
                    return '"unknownTypeError"';
                }
            };
            $(document).ready(function () {
                $('#navigator').text(serialize(navigator));
            });
        </script>
        <style type="text/css">
            #navigator {
                font-family: monospaced;
            }
        </style>
        <title>Serialize</title>
    </head>
    <body>
        <h1>Serialize</h1>
        <p id="navigator"></p>
    </body>
</html>

This code seems to work perfectly in Firefox, Opera, Chrome and Safari but (obviously) doesn't work in Internet Explorer (at least version 8.0), it complains that "Property or method not supported by the object" at line for (var item in object) {.

Do you have any hint on how to fix the code or how to reach the goal (serialize the navigator object) by other means?


Solution (v 2.0):

Replace

for (var item in object) {
    if (item !== 'enabledPlugin') {
        output += '"' + item + '":' + serialize(object[item]) + ',';
    }
}

with

for (var item in object) {
    try {
        if (item !== 'enabledPlugin') {
            output += '"' + item + '":' + serialize(object[item]) + ',';
        }
    }
    catch (e) {
    }
}

and it works.

3
  • $('#navigator').serialize(navigator) or $('#navigator').text().serialize(navigator) possibly? I'm new to jquery, but that looks true to the API.
    – krs1
    Feb 11, 2011 at 14:39
  • @krs1: The jQuery's $("element").serialize(); works only on form elements (see .serialize()).
    – Albireo
    Feb 11, 2011 at 14:51
  • I can't believe I still haven't found a jQuery plug-in to solve this common problem, or even one that can safely stringify an object. Dec 1, 2014 at 5:52

3 Answers 3

20

Try putting it inside a new object

var _navigator = {};
for (var i in navigator) _navigator[i] = navigator[i];

And then serialize it (maybe using some JSON library if the browser doesn't have native JSON API, I use json2.js):

$('#navigator').text(JSON.stringify(_navigator));

Edit: It seems that Internet Explorer doesn't allow navigator.plugins and navigator.mimeTypes to be iterated over, so this works:

var _navigator = {};
for (var i in navigator) _navigator[i] = navigator[i];

delete _navigator.plugins;
delete _navigator.mimeTypes;

$('#navigator').text(JSON.stringify(_navigator));
9
  • But this won't work in Internet Explorer as you're using the for (var item in collection) construct, which is not supported by IE.
    – Albireo
    Feb 11, 2011 at 14:42
  • Actually it is supported. Maybe it is Internet Explorer reporting the wrong line number.
    – Thai
    Feb 11, 2011 at 14:47
  • I don't think IE's reporting a wrong line number, even the developer toolbar highlights that line, and resources on the net are saying it isn't supported. Have you tried my code or a simple loop? Which version of IE are you running?
    – Albireo
    Feb 11, 2011 at 14:57
  • There is no mention of the for (var item in collection) construct, I have been using it for a long time and see no problems. It probably refers to the new for each (var item in iterator) or Array.prototype.forEach.
    – Thai
    Feb 11, 2011 at 15:13
  • Found out that some objects in navigator can't be iterated over. See my updated answer.
    – Thai
    Feb 11, 2011 at 15:25
13

JSON in accepted answer contains only top level elements. Check this out https://jsfiddle.net/j1zb7qm0/ - _navigator.connection is empty. I've wrote a small func to collect all nested properties:

function recur(obj) {
  var result = {}, _tmp;
  for (var i in obj) {
    // enabledPlugin is too nested, also skip functions
    if (i === 'enabledPlugin' || typeof obj[i] === 'function') {
        continue;
    } else if (typeof obj[i] === 'object') {
        // get props recursively
        _tmp = recur(obj[i]);
        // if object is not {}
        if (Object.keys(_tmp).length) {
            result[i] = _tmp;
        }
    } else {
        // string, number or boolean
        result[i] = obj[i];
    }
  }
  return result;
}

You can use it like this var _navigator = recur(navigator) or create your own wrapper. In fact you can use it to iterate over and copy any nested object.

1
  • I'm using your code and work perfect as I want, but I have problem, when I try using var _navigator = recur(window) show error Uncaught RangeError: Maximum call stack size exceeded, how I can avoid this error ?
    – Anas
    Jan 27, 2023 at 15:37
1

I have updated @vladkras's answer to make the function work with nested and circular objects.

function recur(obj, visited = new WeakSet()) {
    if (visited.has(obj)) {
        return {}; // skip already visited object to prevent cycles
    }
    visited.add(obj); // add the current object to the visited set

    var result = {}, _tmp;
    for (var i in obj) {
        try {
            // enabledPlugin is too nested, also skip functions
            if (i === 'enabledPlugin' || typeof obj[i] === 'function') {
                continue;
            } else if (typeof obj[i] === 'object') {
                // get props recursively
                _tmp = recur(obj[i], visited);
                // if object is not {}
                if (Object.keys(_tmp).length) {
                    result[i] = _tmp;
                }
            } else {
                // string, number or boolean
                result[i] = obj[i];
            }
        } catch (error) {
            // handle error, you can log it here if needed
            // console.error('Error:', error);
        }
    }
    return result;
}
JSON.stringify(recur(window))

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.