How to extract nested json file to a html table

Question

I am working on a project to review responses from participants which has been extracted from a firebase database as a json file. Using the following code I am able to read the json and output to console and click through the output to expand the objects.

When I write javascript to extract the objects to a table I get stuck because it is expecting json.drawingLog.A to be an array. I am completely stuck on how to get past this. The main issue is each object is a unique ID and therefore does not follow the "name" : "value" (but the subsequent objects do).

What I am trying to achieve is a table with each key as a column header with the contents of each json string as a new row.

Code to read json and output to console.

// Output json file to console..
fetch("dmao.json")
  .then((response) => response.json())
  .then((json) => {
    console.log(json.drawingLog);
  })
  .catch((error) => {
    console.error("Error fetching or parsing JSON:", error);
  });

Screenshot showing the console output:

Example of first two objects in the JSON file:

"drawingLog": {
    "A": {
      "1648717382638": {
        "canvasHeight": 1000,
        "canvasWidth": 1000,
        "colour": {
          "_array": [
            0.27058823529411763,
            0.44313725490196076,
            0.7215686274509804,
            1
          ],
          "levels": [
            69,
            113,
            184,
            255
          ],
          "maxes": {
            "hsb": [
              360,
              100,
              100,
              1
            ],
            "hsl": [
              360,
              100,
              100,
              1
            ],
            "rgb": [
              255,
              255,
              255,
              255
            ]
          },
          "mode": "rgb"
        },
        "drawingVertices": [
          [
            1000,
            500
          ],
          [
            980,
            629
          ],
          [
            646,
            593
          ],
          [
            828,
            838
          ],
          [
            712,
            897
          ],
          [
            583,
            917
          ],
          [
            377,
            670
          ],
          [
            338,
            838
          ],
          [
            245,
            745
          ],
          [
            186,
            629
          ],
          [
            0,
            457
          ],
          [
            186,
            371
          ],
          [
            245,
            255
          ],
          [
            338,
            162
          ],
          [
            454,
            103
          ],
          [
            583,
            83
          ],
          [
            712,
            103
          ],
          [
            828,
            162
          ],
          [
            920,
            255
          ],
          [
            980,
            371
          ]
        ]
      },
      "1648717474706": {
        "canvasHeight": 1000,
        "canvasWidth": 1000,
        "colour": {
          "_array": [
            0.8352941176470589,
            0.3411764705882353,
            0.6274509803921569,
            1
          ],
          "levels": [
            213,
            87,
            160,
            255
          ],
          "maxes": {
            "hsb": [
              360,
              100,
              100,
              1
            ],
            "hsl": [
              360,
              100,
              100,
              1
            ],
            "rgb": [
              255,
              255,
              255,
              255
            ]
          },
          "mode": "rgb"
        },
        "drawingVertices": [
          [
            933,
            500
          ],
          [
            67,
            1000
          ],
          [
            67,
            0
          ]
        ]
      },

This is the code I have written to create a html table, focusing on just the 'A' items.

// Output json.drawingLog.A to an HTML table
fetch("dmao.json")
  .then((response) => response.json())
  .then((json) => {
    const table = document.getElementById("drawingLogTable");
    const headerRow = table.tHead.rows[0];
    const tbody = table.tBodies[0];

    // Add table headers
    if (Array.isArray(json.drawingLog.A) && json.drawingLog.A.length > 0) {
      for (const key in json.drawingLog.A[0]) {
        const th = document.createElement("th");
        th.textContent = key;
        headerRow.appendChild(th);
      }

      // Add table rows
      json.drawingLog.A.forEach((item) => {
        const tr = document.createElement("tr");
        for (const key in item) {
          const td = document.createElement("td");
          td.textContent = item[key];
          tr.appendChild(td);
        }
        tbody.appendChild(tr);
      });
    } else {
      const tr = document.createElement("tr");
      const td = document.createElement("td");
      td.textContent = "No data available";
      tr.appendChild(td);
      tbody.appendChild(tr);
    }
  })
  .catch((error) => {
    console.error("Error fetching or parsing JSON:", error);
  });