Question

A simple question I’m sure, but I can’t figure it out.

I have some JSON returned from the server

    while ($Row = mysql_fetch_array($params))
    {
        $jsondata[]= array('adc'=>$Row["adc"], 
                           'adSNU'=>$Row["adSNU"],
                           'adname'=>$Row["adname"],
                           'adcl'=>$Row["adcl"],
                           'adt'=>$Row["adt"]);
    };

echo json_encode(array("Ships" => $jsondata));

…which I use on the client side in an ajax call. It should be noted that the JSON is parsed into a globally declared object so to be available later, and that I’ve assumed that you know that I formated the ajax call properly…

if (ajaxRequest.readyState==4 && ajaxRequest.status==200 || ajaxRequest.status==0)
        {
            WShipsObject = JSON.parse(ajaxRequest.responseText);

            var eeWShips = document.getElementById("eeWShipsContainer");

                for (i=0;i<WShipsObject.Ships.length;i++)
                {
                    newElement = WShipsObject.Ships;
                    newWShip = document.createElement("div");

                    newWShip.id = newElement[i].adSNU;
                    newWShip.class = newElement[i].adc;

                    eeWShips.appendChild(newWShip);


                } // end for

        }// If

You can see for example here that I’ve created HTML DIV elements inside a parent div with each new div having an id and a class. You will note also that I haven’t used all the data returned in the object…

I use JQuery to handle the click on the object, and here is my problem, what I want to use is the id from the element to return another value, say for example adt value from the JSON at the same index. The trouble is that at the click event I no longer know the index because it is way after the element was created. ie I’m no longer in the forloop.

So how do I do this?

Here’s what I tried, but I think I’m up the wrong tree… the .inArray() returns minus 1 in both test cases. Remember the object is globally available…

$(".wShip").click(function(){

    var test1 = $.inArray(this.id, newElement.test);
    var test2 = $.inArray(this.id, WShipsObject);

    //alert(test1+"\n"+test2+"\n"+this.id);

});

Answer 1

I could not find a way of finding the index as asked, but I created a variation on the answer by Devraj.

In the solution I created a custom attribute called key into which I stored the index.

newWShip.key = i;

Later when I need the index back again I can use this.key inside the JQuery .click()method:

var key = this.key;
var adt = WShipsObject.Ships[key].adt;

You could argue that in fact I could store all the data into custom attributes, but I would argue that that would be unnecessary duplication of memory.