Passing Object in javascript function - Object is undefined

Question

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);
}

Where is the JSON? You don't have any JSON, you have an array. It doesn't need parsing ... — Teemu
– Teemu, Commented Jun 26, 2014 at 5:41
He said he referred the fiddle... I think its not his fiddle — Tejasva Dhyani
– Tejasva Dhyani, Commented Jun 26, 2014 at 5:43
@ShaunakD - It's one of the arguments of the function showFolders. — Derek 朕會功夫
– Derek 朕會功夫, Commented Jun 26, 2014 at 5:45

Community · Accepted Answer · 2017-05-23 12:11:00Z

2

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]);
    });
}

edited May 23, 2017 at 12:11

CommunityBot

11 silver badge

answered Jun 26, 2014 at 5:48

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Aki008 Over a year ago

You have syntax error in your first code, please fix this

Aki008 Over a year ago

Just add "}" before ")(i); line 6 of your code and that will work"

nmaier Over a year ago

Erm... let still has the same issue as var in your example... E.g. in open in Firefox to see the problem: jsfiddle.net/aLsyc

Nishan Senevirathna · Accepted Answer · 2014-06-26 06:21:55Z

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"));   
}

Collectives™ on Stack Overflow

Passing Object in javascript function - Object is undefined

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related