CODEWITHSUNDEEP
javascriptjquery
instanceOfObject
instanceOfObject

Reputation: 2984

Possible reason of "Uncaught TypeError: Cannot read property 'ecommerce' of undefined"

I am running this code where script method is called once document is ready. Also, I can get the object if I put a debugger and alert its value but it throws an error saying "Uncaught TypeError: Cannot read property 'ecommerce' of undefined" while running locally.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jsonObj = {
        "input": {
            "ecommerce": 
                {
                    "id": 123,
                    "name": "isEcommerce",
                    "type": "boolean",
                    "actionType" : "radioButton",
                    "child": {"yes":["p","q","e","w"],
                                "no":["a","b","c","d"]}
                },
            "bad website": 
            {
                "id": 2324,
                "name": "isBadWebsite",
                "type": "boolean",
                "actionType" : "radioButton",
                "child": {"yes":["erw","sd","sd","sd"],
                            "no":["sd","sd","sd","fd"]}
            }
        }
};
var data = jsonObj;     
$(document).ready(function(data){
    alert("HI!!");
    alert(data);
    alert(data.input);
    alert(data.input.ecommerce);
});

function tackleEvent(obj){
    alert("Clicked " + obj);

}
</script>
</head>
<title>Hello!</title>

<body>
</body>
</html>

ERROR trace:

   Uncaught TypeError: Cannot read property 'ecommerce' of undefined ui:34
    (anonymous function) ui:34
    f.Callbacks.n jquery.min.js:2
    f.Callbacks.o.fireWith jquery.min.js:2
    e.extend.ready jquery.min.js:2
    c.addEventListener.B jquery.min.js:2

Why is it not able to get the object and is working while typing same?

Upvotes: 1

Views: 6439

Answers (2)

hjpotter92
hjpotter92

Reputation: 80639

If you noticed on the previous 2 alert boxes, the value shown for data would be:

function(a,b) { return new e.fn.init(a,b,h) }

which is because an alias of jQuery namespace has been passed inside the following function (with a local copy named data):

function(data){
    alert("HI!!");
    alert(data);
    alert(data.input);
    alert(data.input.ecommerce);
}

and has been named data. Thus, inside the above function; you can use:

data.ajax()
data.ready() //another
data.load()
// and all other jQuery functions.

To access global variable data; you'd need to use: window.data.

Upvotes: 1

Sumurai8
Sumurai8

Reputation: 20737

You are checking a local variable, instead of the global variable.

When you call $(document).ready(function(data){, you are probably assuming that data in that function is the global variable data. What you are actually doing is creating a local variable, which contains whatever $(document).ready( ... ) puts in it. As far as I know, the first variable in a function called by $(document).ready( ... ) will contain jQuery.

You can fix it by removing data from that function call. It now uses the global variable instead.

$(document).ready( function(){
    alert("HI!!");
    alert(data);
    alert(data.input);
    alert(data.input.ecommerce);
});

Upvotes: 0

Related Questions