CODEWITHSUNDEEP
javascriptjqueryhtml
Aki008
Aki008

Reputation: 403

Passing Object in javascript function - Object is undefined

I am passing Object to another function but I am getting `"Obj Undefined error". I have referred from this http://jsfiddle.net/F6FxB/2/

HTML:

<div class="panel accordion clearfix" id="dispdir">
    <script type="text/javascript">
        window.onload = function () {
            showFolders([{
                "folderName": "eod-balance-summary",
                "objects": [{
                    "keyName": "eod-balance-formatted-2014-06-01.csv",
                    "keyValue": "eod-balance-summary/eod-balance-formatted-2014-06-01.csv"
                }],
                "childDirs": []
            }, {
                "folderName": "reconciliation-activity-summary",
                "objects": [{
                    "keyName": "recon-summary-2014-04-01-2014-04-02.csv",
                    "keyValue": "reconciliation-activity-summary/recon-summary-2014-04-01-2014-04-02.csv"
                }],
                "childDirs": []
            }]);
        };
    </script>
</div>

JavaScript:

folderId = 1;

function showFolders(folderList) {
    var markup = "";
    $("#dispdir").append("<ul>");
    for (var i = 0; i < folderList.length; i++) {
        var fid = "folder_" + folderId;
        markup = "<li id='" + fid + "'>" + folderList[i].folderName + "</li>";
        $("#dispdir").append(markup);
        $("#" + fid).on("click", function () {
            showJson(folderList[i]);
        });
        folderId += 1;
    }
    $("#dispdir").append("</ul>");
}

function showJson(Obj) {
    alert(Obj.folderName);
}

Upvotes: 2

Views: 2918

Answers (2)

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

This doesn't work because of this line: showJson(folderList[i]);

i has the same value as folderList.length. Since this line is execute when the element is clicked, i's value has already been changed by the loop. There is no block scope in JavaScript. Because i is the same as the length of the array, folderList[i] would be undefined. When it gets passed to showJson, Obj would then be undefined.

To fix this, simply wrap it with an anonymous function.

$("#" + fid).on("click",
    (function(i){
        return function(){
            showJson(folderList[i]);
        };
    })(i)
);

In JavaScript 1.7 though, there are block scopes:

for(let i = 0; i < folderList.length; i++){
    let j = i;
    $("#" + fid).on("click", function(){
        showJson(folderList[j]);
    });
}

Upvotes: 2

Nishan Senevirathna
Nishan Senevirathna

Reputation: 719

You can't use variable "i" inside the click function. since when you click on a div element i has finally updated value i.e 2 since your array has 2 element. So set data to the element itself and retrieve this data later when click on the element. For Ex:

function showFolders( folderList ) {

    $("#dispdir").append("<ul>");
    for ( var i = 0; i < folderList.length; i++ ) {
         var fid = "folder_"+folderId;
         var markup = $("<li id='" + fid + "'>" + folderList[i].folderName + "</li>");
         $(markup).attr("metadata",folderList[i].folderName);

         $("#dispdir").append(markup);   
         $(markup).click(function(){          
            showJson($(this));
         });

         folderId += 1;
    }
    $("#dispdir").append("</ul>");
}

function showJson( Obj ) {
    alert($(Obj).attr("metadata"));   
}

Upvotes: 1

Related Questions