passing set of data to javascript function through jquery.html()

Question

I have 2 function in my code - makeData and displayData -.

<script type="text/javascript">
    function makeData(){
        var myjson = {}; var myarray = [];
        for (var i = 0; i < 10; i++){ 
           myjson[i] = "json"+i; 
           myarray[i] = "array"+i;
        }

        //when i pass myjson[1] and myarray[1] value, it's work for me
        $("#mydiv").html("<input type=\"button\" value=\"display data\" 
              onclick=displayData(\""+myjson[0]+"\",\""+myarray[0]+"\") />");
        /*but when i tried to pass the json and array object, i got problem here.
          displayData() function cannot read those objects*/
        $("#mydiv").html("<input type=\"button\" value=\"display data\" 
              onclick=displayData(\""+myjson+"\",\""+myarray+"\") />");

    }
</script>
<input type="button" value="make some button" onclick="makeData()" />
<div id="mydiv"></div>
<div id="dataDisplay"></div>

how can i pass array / json object to javascript function that write using innerHTML ???

note : my purpose is to pass set of data to javascript function.

edit : i think now it is more clearly now. sorry about before..

You should refactor your whole code to not mix jQuery and crappy inline events and directly accessing stuff that is provided in a better way by jQuery (window.event is IE-only!) — ThiefMaster
– ThiefMaster, Commented Jul 14, 2012 at 9:27
oh, i'm sorry for my disorderly code.. but i am still new in javascript and jquery. so now what method works for me that what i wrote. i wish i could be helped to improved. — sakuragi
– sakuragi, Commented Jul 14, 2012 at 9:36

Yan Berk · Accepted Answer · 2012-07-14 13:22:56Z

1

You can convert your object or array to a string representation (JSON) to write it in the DOM (e. g. as param for a function you call onclick).

Give me 10 min to write a better example. Here it is. It's not perfect (e. g. indexes seem to be of type "string" even if actually are "number") but it should cover most cases. Note that you cannot convert functions or references with this example:

function convertObjectToString( obj )
{
    var stringRep = "{";

    for ( var index in obj)
    {       
        var cIndex;
        if ( typeof index == "number" ) // int index
            cIndex = index;    
        else // string index
            cIndex = "\"" + index + "\"";

        if ( typeof obj[index] == "object" )
            stringRep += cIndex + ":" + convertObjectToString( 
                            obj[index] ) + ","; // convert recursively
        else if ( typeof obj[index] == "number" )
            stringRep += cIndex + ":" + obj[index] + ",";
        else
            stringRep += cIndex + ":\"" + obj[index] + "\","; 

    }
    // remove trailing comma (if not empty)
    if ( stringRep.length > 1 )
        stringRep = stringRep.substr(0, stringRep.length - 1);
    stringRep += "}";
    return stringRep;
}

Or better just use the JSON.stringify function! https://developer.mozilla.org/En/Using_native_JSON/

edited Jul 14, 2012 at 13:22

Yan Berk

14.5k9 gold badges58 silver badges52 bronze badges

answered Jul 14, 2012 at 10:32

m02ph3u5

3,1617 gold badges43 silver badges59 bronze badges

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

4 Comments

sakuragi Over a year ago

so, what i need to add based on your e.g are JSON.parse(stringRep); right? i still don't get it.. but let me try your suggest..

sakuragi Over a year ago

hhmmm... ok.. now i mostly understand about json. but, i still cannot pass json object to displayData() , inside html input script that i wrote above..

m02ph3u5 Over a year ago

Well, I've no idea what your displayData function does. Anyhow you'll have to reconvert the string to an object using parseJson within displayData.

sakuragi Over a year ago

i use displayData to display set of data i've passed. actually thats not my origin script.. i just make that more simple so that can be understand easily. the most important thing is how can i pass that json or array to another function through that method?? i mean the function that i call using jquery.html()

sakuragi · Accepted Answer · 2012-07-16 13:18:33Z

0

i think i've already found the answer of my problem. and this is the modified code :

function buatdata(){
    var myjson={};
    var myarray= [];
    for(var i = 0 ; i < 10 ; i++){
        myjson[i] = "json"+i;
        myarray[i] = "array"+i;
    }
    var arraystring = myarray.toString().replace(\,\g,"&#44;");
    var jsonstring = JSON.stringify(myjson).replace(\"\g,"&quot;");

    /* i changed " to ' to wrap parameter that i passed in tampildata() function 
        and i convert those object to string first.*/

    $("#tombol").html("<input type=\"button\" value=\"display\" 
          onclick=tampildata('"+jsonstring+"','"+arraystring+"') />");
}
function tampildata(getjson,getarray){
    //i changed string that i passed back to object, so i get what i want.
    var myarray = getarray.split(',');
    var myjson = JSON.parse(getjson);
}

with that function, i pass array and json object through. but i still hope there is other method i can use. because i'm affraid if my set of data very big, it can slow the proses.

edited Jul 16, 2012 at 13:18

answered Jul 14, 2012 at 13:03

sakuragi

379 bronze badges

3 Comments

sakuragi Over a year ago

ok, now i've found a new problem with my answer above.. if json / array value have space (e.g myjson[i]="try this out" or myarray[i]="this value have a space too"). it doesn't work..

m02ph3u5 Over a year ago

Why don't you just store your values globally?

Bariq Dharmawan Over a year ago

Just ask your teacher on your school dude!! pak aroh maybe :v

Collectives™ on Stack Overflow

passing set of data to javascript function through jquery.html()

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related