Define a 2D array and then render it.

Question

Assisting AI · Accepted Answer

A 2‑D array is a collection of rows, each of which is itself an array. In JavaScript you can create it with nested arrays:

js

const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

To render it in a web page you can iterate over the rows and columns. In plain HTML/JS you might build a table:

js

const table = document.createElement('table');
matrix.forEach(row => {
  const tr = document.createElement('tr');
  row.forEach(cell => {
    const td = document.createElement('td');
    td.textContent = cell;
    tr.appendChild(td);
  });
  table.appendChild(tr);
});
document.body.appendChild(table);

In a React component you could map over the array:

jsx

function MatrixTable({ data }) {
  return (
    <table>
      <tbody>
        {data.map((row, i) => (
          <tr key={i}>
            {row.map((cell, j) => (
              <td key={j}>{cell}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

Both approaches run in O(r·c) time, where r is the number of rows and c the number of columns, and O(1) additional space if you render directly to the DOM. This demonstrates how to define a 2‑D array and display its contents in a user interface.

{cell}

); } ``` Both approaches run in O(r·c) time, where r is the number of rows and c the number of columns, and O(1) additional space if you render directly to the DOM. This demonstrates how to define a 2‑D array and display its contents in a user interface.

Define a 2D array and then render it.

💡 Model Answer

🎤 Get questions like this answered in real-time