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, Jun 26 '14 at 05:41
He said he referred the fiddle... I think its not his fiddle — Tejasva Dhyani, Jun 26 '14 at 05:43
@ShaunakD - It's one of the arguments of the function `showFolders`. — Derek 朕會功夫, Jun 26 '14 at 05:45
possible duplicate of [JavaScript closure inside loops – simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — nmaier, Jun 26 '14 at 05:50

score 2 · Accepted Answer · edited May 23 '17 at 12:11

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 '17 at 12:11

Community

1
1

answered Jun 26 '14 at 05:48

Derek 朕會功夫

92,235
44
185
247

You have syntax error in your first code, please fix this – Aki008 Jun 26 '14 at 06:00
Just add "}" before ")(i); line 6 of your code and that will work" – Aki008 Jun 26 '14 at 07:03
Erm... `let` still has the same issue as `var` in your example... E.g. in open in Firefox to see the problem: http://jsfiddle.net/aLsyc/ – nmaier Jun 26 '14 at 08:32

Nishan Senevirathna · Answer 2 · 2014-06-26T06:21:55.487

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

Passing Object in javascript function - Object is undefined

2 Answers2