My Javascript Tic Tac Toe game keeps skipping turns

Question

I'm attempting to make a Tic Tac Toe game on my own but when trying to make the players' turn function it just skips all my players' rounds and jumps to the last round since I have it looping each players' turns 3 times. I understand that the click events I created isn't apart of the normal 'flow' so how can I refactor this so that each player round the program waits for the current player to make a single move? My added console.log() statements come up with this result to show the round skips when Player 1 chooses 'X' as their marker:

Round #1 Player 1 script.js:27:29
Round #1 Player 2 script.js:29:29
Round #2 Player 1 script.js:27:29
Round #2 Player 2 script.js:29:29
Round #3 Player 1 script.js:27:29
Round #3 Player 2 script.js:29:29

Code here:

const cells = document.getElementsByClassName("cell");

const game = (() => {
    const playGame  = function() {
        let player1 = {};
        let player2 = {};

        gameBoard.generateBoard();
        displayController.generatePlayerOneDisplay("Choose a marker below");
        displayController.generatePlayerTwoDisplay("Wait for Player 1 to decide");
        displayController.generateMainDisplay("Welcome to Tic Tac Toe!");

        const xButton = document.getElementById("x-button");
        const oButton = document.getElementById("o-button");

        xButton.onclick = function() {
            const player1Name = prompt("Enter your name, Player 1: ");
            player1 = Player(player1Name, "X");

            if(player1.name) {
                const player2Name = prompt("Enter your name, Player 2: ");
                player2 = Player(player2Name, "O");
                displayController.generatePlayerOneDisplay(`${player1.name} (${player1.marker})`);
                displayController.generatePlayerTwoDisplay(`${player2.name} (${player2.marker})`);

                for(let x = 1; x < 4; x++) {
                    console.log(`Round #${x} Player 1`);
                    playRound(player1);
                    console.log(`Round #${x} Player 2`);
                    playRound(player2);
                }
            }
        };
        oButton.onclick = function() {
            const player1Name = prompt("Enter your name, Player 1: ");
            player1 = Player(player1Name, "O");

            if(player1.name) {
                const player2Name = prompt("Enter your name, Player 2: ");
                player2 = Player(player2Name, "X");
                displayController.generatePlayerOneDisplay(`${player2.name} (${player2.marker})`);
                displayController.generatePlayerTwoDisplay(`${player1.name} (${player1.marker})`);

                for(let x = 1; x < 4; x++) {
                    console.log(`Round #${x} Player 2`);
                    playRound(player2);
                    console.log(`Round #${x} Player 1`);
                    playRound(player1);
                }
            }
        };
    };
    const playRound = function(player) {
        displayController.generateMainDisplay(`${player.name} (${player.marker}), it's your turn`);

        for(let x = 0; x < cells.length; x++) {
            cells[x].onclick = function() {
                if(cells[x].textContent === "") {
                    cells[x].textContent = player.marker;
                    console.log(cells[x]);
                    spaceClicked = true;
                }
            }
        }
    }
    return {playGame};
})();

Answer 1

Attempting to answer this without the full context of your starting DataFrame structure. I've created a simple dataframe as a starting point and show how to get something like the nested structure you are looking for.

Note that I left out the "drill_through" element on the Country level, which you showed as being an empty array, because I'm not sure what you would be including there as children of the Country. But it should be trivial to add an empty array on each country element when creating those, if you really want that.

import pandas as pd
import json

df = pd.DataFrame(
    data=[
        ("EURO","UK",100),
        ("EURO","Ireland",80),
        ("AMR","Mexico",20),
        ("AMR","California",110),
        ("APAC","Japan",90)
    ], 
    columns=["region","country","total_count"]
)

#First get the regions into a list of dictionary objects
regions = df[["region", "total_count"]].groupby("region").sum()
regions["geo"] = regions.index.values
regions = regions.to_dict(orient="records") 

#now add the countries to each region dictionary
for region in regions:
    countries = df[df["region"] == region["geo"]].drop("region", axis=1).groupby("country").sum()
    countries["geo"] = countries.index.values
    region["drill_through"] = countries.to_dict(orient="records")
    
#Serialize the list of regions as JSON
json_str = json.dumps(regions)

print(json_str)

Output:

[
    {
        "total_count": 130,
        "geo": "AMR",
        "drill_through": [
            {
                "total_count": 110,
                "geo": "California"
            },
            {
                "total_count": 20,
                "geo": "Mexico"
            }
        ]
    },
    {
        "total_count": 90,
        "geo": "APAC",
        "drill_through": [
            {
                "total_count": 90,
                "geo": "Japan"
            }
        ]
    },
    {
        "total_count": 180,
        "geo": "EURO",
        "drill_through": [
            {
                "total_count": 80,
                "geo": "Ireland"
            },
            {
                "total_count": 100,
                "geo": "UK"
            }
        ]
    }
]