evalDemo.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>eval() demo</title>

    <script type="text/javascript">
        // utility for my convenience
        function get( eid ) {return document.getElementById( eid ); };

        // let's start with the rawest json expression of the object
        // ...rawest json declaration without need to eval()
        // declares an object with a key named employees which has a
        // value that is an array containing three elements, each of
        // which is addressable by numeric (integer) index position and
        // each of which is an object with keys named firstName and
        // lastName
        var rawest = {
            employees:[
                {firstName:"John",lastName:"Doe" },
                {firstName:"Anna",lastName:"Smith" },
                {firstName:"Peter",lastName:"Jones" }
            ]
        };

        // now, let's convert the rawest form into an eval()uable string
        var txt2 = '{employees:[' +
            '{firstName:"John",lastName:"Doe" },' +
            '{firstName:"Anna",lastName:"Smith" },' +
            '{firstName:"Peter",lastName:"Jones" }]}';

        // let's add a raw json expression of the object with quoted key
        // names (this will operate the same as the original rawest form)
        // ...raw json declaration without need to eval()
        var raw = {
            "employees":[
                {"firstName":"John","lastName":"Doe" },
                {"firstName":"Anna","lastName":"Smith" },
                {"firstName":"Peter","lastName":"Jones" }
            ]
        };

        // now, let's convert the raw form into an eval()uable string
        // original question code starts here - - - -
        var txt = '{"employees":[' +
            '{"firstName":"John","lastName":"Doe" },' +
            '{"firstName":"Anna","lastName":"Smith" },' +
            '{"firstName":"Peter","lastName":"Jones" }]}';

        // placing txt in "(" and ")" prevents parser from being confused by
        // opening "{" - language spec forbids starting an eval() argument
        // with a curly brace (possible to misinterpret it as a block)
        var obj = eval ("(" + txt + ")");
        // original question code ends here - - - -

        // now that you know why the "(" and ")" are needed, eval() the text
        // form of rawest too
        var obj2 = eval ("(" + txt2 + ")");

        window.onload = function() {
            // original
            document.getElementById("fname").innerHTML=obj.employees[1].firstName
            document.getElementById("lname").innerHTML=obj.employees[1].lastName
            // display equivalence of eval() of txt2
            get("fname2").innerHTML=obj2.employees[1].firstName
            get("lname2").innerHTML=obj2.employees[1].lastName
            // display equivalence of raw
            get("fnamer").innerHTML=raw.employees[1].firstName
            get("lnamer").innerHTML=raw.employees[1].lastName
            // display equivalence of rawest
            get("fnamerst").innerHTML=rawest.employees[1].firstName
            get("lnamerst").innerHTML=rawest.employees[1].lastName
        };
    </script>
</head>

<body>
    <h1>eval() demo</h1>
    <p>
        results of original code (obj):
        <span id="fname"></span> <span id="lname"></span>
    </p>
    <p>
        results of eval() of text form of rawest:
        <span id="fname2"></span> <span id="lname2"></span>
    </p>
    <p>
        results of raw json without eval():
        <span id="fnamer"></span> <span id="lnamer"></span>
    </p>
    <p>
        results of rawest json without eval():
        <span id="fnamerst"></span> <span id="lnamerst"></span>
    </p>
</body>
</html>