如何遍历并从复杂对象（数组）中提取属性值？

Question

The following snippet is from an opensource poker client written in JQuery. It displays a poker table that has been previously spawned by the poker server. The table is displayed within a div on the page after the page is loaded.

//
// featured table
//
jpoker.plugins.featuredTable = function(url, options) {

    var opts = $.extend({}, jpoker.plugins.featuredTable.defaults, options);
    var server = jpoker.url2server({ url: url });

server.registerUpdate(function(server, what, packet) {
    if (packet && packet.type == 'PacketPokerTableList') {
        if (packet.packets.length === 0) {
        var updated = function(server, what, packet) {
            if(packet && packet.type == 'PacketPokerTableList') {
            var found = null;
            for(var i = packet.packets.length - 1; i >= 0 ; i--) {
                var subpacket = packet.packets[i];
                if(opts.compare(found, subpacket) >= 0) {
                found = subpacket;
                }
            }
            if(found) {
                found.game_id = found.id;
                server.setTimeout(function() { server.tableJoin(found.game_id); }, 1);
            }
            return false;
            } else {
            return true;
            }
        };
        server.registerUpdate(updated, null, 'featuredTable ' + url);
        server.selectTables(opts.string);
        }
        return false;
    } else {
        return true;
    }
    }, null, 'featuredTable ' + url);
    server.selectTables('my');
    return this;
};

jpoker.plugins.featuredTable.defaults = {
    string: '',
    compare: function(a, b) { return a && b && b.players - a.players; }
};

The code references the following complex dynamic object.

{"players":3,"type":"PacketPokerTableList","packets":[{"observers":1,"name":"sitngo417","waiting":0,"percent_flop":0,"average_pot":10852,"skin":"default","variant":"holdem","hands_per_hour":120,"betting_structure":"level-15-30-no-limit","currency_serial":0,"muck_timeout":5,"players":2,"reason":"TableList","tourney_serial":58151,"seats":2,"player_timeout":60,"type":"PacketPokerTable","id":97},{"observers":0,"name":"sitngo418","waiting":0,"percent_flop":100,"average_pot":97700,"skin":"default","variant":"holdem","hands_per_hour":100,"betting_structure":"level-15-30-no-limit","currency_serial":0,"muck_timeout":5,"players":1,"reason":"TableList","tourney_serial":58151,"seats":2,"player_timeout":60,"type":"PacketPokerTable","id":98}],"tables":2,"time__":1329073257148}

Essentially, there are nested objects within an object or arrays within arrays if you prefer. The main object is named "packet" with a type of "PacketPokerTableList" and the nested objects are named "packets" with each sub packet within packets having a type of "PacketPokerTable". There can be any number of sub packets within packets and they vary depending on the number of tables that are in a given tournament. Each subpacket of type "PacketPokerTable" contains a number of elements that have a given value that is representative for each table in the tournament. The for loop in the above code only looks at the first subpacket in packets and retrieves the value of "id", which in this case is 97 and then displays the table by calling server.tableJoin().

I wish to modify this default behaviour so that the "for loop" cycles through all of the sub packets of type "PacketPokerTable" within packet type "PacketPokerTableList" and retrieve the value of "id" from each of the sub packets. Then instead of automatically displaying the table in a div of the current page; I want, for each table "id", to display its related table in a new browser window with the window.open() method.

The first obstical that I haven't been able to overcome is how to loop through the this complex object and retrieve all the values of "id". Not sure if it is possible or not. Everything that I have researched on the web mostly relate to "for loops" with very basic arrays; of which none have been helpfull. The second obstacle is how to pass this variable along with a function that executes in the child windows.

It seems that solving this own my own is way above my station, I would greatly appreciate any input on how to accomplish this task.

Answer 1

To loop through each element you must use recursion. I didn't really understood what you want to do, but here is a simple example:

function loop(obj) {
  if(obj.someprop == 'someval') {
    //do something
  } else {
    loop(obj);
  }
}

Answer 2

I'm not entirely sure how server.tableJoin() works, but if it returns html for the table, then this will do the trick. If not, you'll need to do whatever you do to create the html for the new table and put it in it's place.

//make sure the object has the necessary info       
if(packet && packet.type == 'PacketPokerTableList' && packet.packets && packet.packets.length > 0) {
        //go through each packet.packets
        for (var i=0;i < packet.packets.length;i++){
            if(packet.packets[i].type == 'PacketPokerTable'){
                var id = packet.packets[i].id;
                //open window
                var newWin = window.open('_blank',id);
                //write new content in the new window
                newWin.document.write(server.tableJoin(id));
            }
        }
    }