how do I fix my code in order to display one table?

Question

I am trying to render my dynamic JSON, but I am getting a table per result when it should be rendered in the same table.. what's happening this? my dummy array is a model from my backend api

const arr = [
  {
      "Demo": [
          {
              "_id": "T08210",
              "name": "tilehaha",
              "tags": [
                  "Demo"
              ],
              "queries": [],
              "urls": [],
              "max_leght": [],
              "count_items": []
          },
      ],
    }
  ];

export default function Demo() {
  return (
    <div>
  {arr.map(obj =>
    Object.entries(obj).map(([key, value]) => (
        <table class="table">
        <thead>
          <tr key={key}>
            <th scope="col">{key}</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{value.activityType}</td>
            <td>{value.durationInSeconds}</td>
          </tr>
        </tbody>
      </table>
    )))}
</div>
  );
}

I need to place in the blue section as heading 2671161009, and 2671161249 , and their child items as the following

Answer 1

Try this.

<table class="table">
    <thead>
      <tr>
        {arr.map(obj => Object.entries(obj).map(([key, value]) => ( 
            <th scope="col">{key}</th>
        )))}
      </tr>
    </thead>
    <tbody>
    {arr.map(obj => Object.entries(obj).map(([key, value]) => ( 
          <tr>
            <td>{value.activityType}</td>
            <td>{value.durationInSeconds}</td>
          </tr>
     )))}
     </tbody>
 </table>

Answer 2

Based on your comments, it seems like maybe this is what you want:

Note to future views -- now not applicable to the changed question :

const modArray = Object.keys(arr[0]).map(i => {
  return {id: i, ...arr[0][i]}
});

const rowKeys = Object.keys(modArray[0]).filter(i => i !== "id")

export default function Demo() {
  return (
    <div>
      <table class="table">
        <thead>
          <tr>
          {modArray.map(i => <th key={i.id}>{i.id}</th>)}
          </tr>
        </thead>
        <tbody>
          <tr>
            {modArray.map(item => <td key={item.id}>{item.activityType}</td>)}
          </tr>
          <tr>
            {modArray.map(item => <td key={item.id}>{item.durationInSeconds}</td>)}
          </tr>

          {/* Or, do it dynamically */}
          {rowKeys.map(rowKey => <tr key={rowKey}>
            {modArray.map(item => <td key={item.id}>{item[rowKey]}</td>)}
          </tr>)}
    </tbody>
    </table>
  </div>
  );
  }

Note that at the top of that code sample, I transformed your input into a more usable format. Your beginning arr , for example, was an array of just 1 object, which had multiple keys, which really seemed to be the array you wanted to iterate over.

Hopefully this is at least close to what you're looking for.

Update 2, based on your changed question :

export default function Demo() {
  return (
    <div>
      <table className="table">
        <thead>
          <tr>
          {arr[0]["Demo"].map(i => <th key={i._id}>{i._id}</th>)}
          </tr>
        </thead>
        <tbody>
          <tr>
            {arr[0]["Demo"].map(item => <td key={item._id}>{item.name}</td>)}
          </tr>
    </tbody>
    </table>
  </div>
  );
  }

Answer 3

The issue is here:

{arr.map(obj =>
    Object.entries(obj).map(([key, value]) => (
        <table class="table">

here you have put the entire table inside the loop instead of putting a single table row. So on every iteration it generates a new table. To resolve this issue, try this:

Try this:

<table class="table">
    <thead>
      <tr>
        <th scope="col">Heading 1</th>
        <th scope="col">Heading 2</th>
      </tr>
    </thead>
    <tbody>
    {
    arr.map(obj =>
        Object.entries(obj).map(([key, value]) => ( 
          <tr>
            <td>{value.activityType}</td>
            <td>{value.durationInSeconds}</td>
          </tr>
     )))}
     </tbody>
 </table>