CODEWITHSUNDEEP
javascriptjqueryobjectmethods
user2095686
user2095686

Reputation:

Javascript Object Passed Into Method Is A String

I'm building a phonegap project using jQuery mobile.

I have a javascript object that I'm iterating through.

Currently the problem is this:

Below is a method in my model object. It is self recursing, and once called, will recurse through itself to the next level every time a user clicks on a list item generated by the previous level of the object.

What I am battling with is passing the iterated segment, b, into the method itself as an object. For some reason this is returned as a string called [Object], and not the object itself.

This function does work as it's displaying the first level, but something about the "firstString" string I am creating for each child seems to be turning my object into a string named object. I have removed the quotes, placed the object in braces, to no avail.

Would anyone have any idea why this is happening, I'm obviously missing something important regarding passing objects into methods whose call is generated as a string...

My code is below, and line causing the issue is firstString+="model.recurseAppTree('"+b+"');";

recurseAppTree: function(AppTree)
{
    $.each(AppTree, function(a,b)
    {
        var firstString='<li data-role="list-divider" role="heading" data-theme="b">'+b.DisplayValue+'</li>';

        if(b.Children != null)
        {
            $.each(b.Children, function(c,d)
            {
                firstString+="<li data-theme='c'><a  data-transition='slide' id='id-"+d.IdValue+"' href='javascript:void(0);'>"+d.DisplayValue+"</a></li>";
                firstString+="<script>";
                firstString+="$('#id-"+d.IdValue+"').click(function(){";
                firstString+="model.recurseAppTree('"+b+"');";
                firstString+="});";
                firstString+="</script>";
            });
        }

        $("#selectview").html(firstString);
        $("#selectview").listview('refresh', true);

    });
},

Upvotes: 2

Views: 99

Answers (2)

LeGEC
LeGEC

Reputation: 51860

You should use event delegation for your gui

1- Add a (common) class to your '' tags, e.g. unrollLink :

var firstString='<li ...><a class="unrollLink" ...></a></li>"

2- Choose a node in your html, which is a parent of all your "tree" nodes, and will always be present in your html. Delegate the click handler to this node :

$('#selectview').on('click', '.unrollLink', function(){
    //this === clicked link - write a function which returns the node you want based on the "id" you set
    var myNode = getNode( this.id );
    model.recurseAppTree( myNode );
});

3- change your function to produce the adequate html. You don't need to add code for the click events :

recurseAppTree: function(AppTree)
{
    $.each(AppTree, function(a,b)
    {
        var firstString='<li data-role="list-divider" role="heading" data-theme="b">'+b.DisplayValue+'</li>';

        if(b.Children != null)
        {
            $.each(b.Children, function(c,d)
            {
                // add the class you chose to the clickable items :
                firstString+='<li data-theme="c"><a class="unrollLink" data-transition="slide" id="id-'+d.IdValue+'" href="javascript:void(0);">'+d.DisplayValue+'</a></li>';
            });
        }

        $("#selectview").html(firstString);
        $("#selectview").listview('refresh', true);

    });
},

Upvotes: 0

yunzen
yunzen

Reputation: 33439

It's just normal.

You use an object in a string context by the concatenation with +. This tells JS to implicitely cast the object to a string.

b = {}
alert(typeof b) // object
alert(typeof (''+b)) // string

Upvotes: 2

Related Questions