Show information in a table based on a unique identifier

Question

Show information in a table based on a unique identifier

I am working with some data that looks like this

[
  {
   date: '20 Apr',
   maths: [70, 80.5, 100],
   science: [25, 20.1, 30]
  },
  {
   date: '21 Apr',
   maths: [64, 76, 80],
   science: [21, 25, 27]
  },
];

My goal is to present the data in a table format with customized labels for each subject. The desired output should look like this:

date   |      maths      |     science
       | min | val | max | min | val | max
20 Apr | 70  | 80.5| 100 | 25  | 20.1| 30
21 Apr | 64  | 76  | 80  | 21  | 25  | 27

I have attempted the code which can be viewed here. I am wondering if there is a way to achieve this desired output or if I need to restructure the data differently.

javascript arrays angular typescript

Answer 1

Answer №1

The initial structure includes two header rows, with the first header containing the "Date" cell.
Following that, create subject headers using the primary mark object and include subheadings such as "min", "val", and "max".
Subsequently, iterate over the subjects and populate the table body with relevant data.

const marks = [
  { date: "20 Apr", maths: [70, 80.5, 100], science: [25, 20.1, 30] },
  { date: "21 Apr", maths: [64, 76, 80], science: [21, 25, 27] },
];

const table = document.getElementById("table");
const tableBody = document.getElementById("table-body");
const tableHeader = document.getElementById("table-header");
const tableSubHeader = document.getElementById("table-sub-header");

if (marks[0]) {
  const { date, ...subs } = marks[0];
  Object.keys(subs).forEach((sub) => {
    const th = document.createElement("th");
    th.textContent = sub;
    th.setAttribute("colspan", 3);
    tableHeader.appendChild(th);
    ["min", "val", "max"].forEach((subheading) => {
      const th = document.createElement("th");
      th.textContent = subheading;
      th.setAttribute("scope", "col");
      tableSubHeader.appendChild(th);
    });
  });

}

marks.forEach((mark) => {
  const tr = document.createElement("tr");
  const { date, ...subs } = mark;
  const th = document.createElement("th");
  th.textContent = date;
  th.setAttribute("scope", "row");
  tr.appendChild(th);
  Object.keys(subs).forEach((sub) => {
    const [min, val, max] = subs[sub];
    tr.innerHTML += `<td>${min}</td><td>${val}</td><td>${max}</td>`;
  });
  tableBody.appendChild(tr);

});

body {
  font-family: arial;

}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

td, th {
  padding: 0.5em;
  border: 1px solid black;
}

th {
  text-transform: capitalize;

}

<table id="table">
  <thead>
    <tr id="table-header"><th rowspan="2" scope="col">Date</th></tr>
    <tr id="table-sub-header"></tr>
  </thead>
  <tbody id="table-body">
  </tbody>
</table>

Answer 2

The initial structure includes two header rows, with the first header containing the "Date" cell.
Following that, create subject headers using the primary mark object and include subheadings such as "min", "val", and "max".
Subsequently, iterate over the subjects and populate the table body with relevant data.

const marks = [
  { date: "20 Apr", maths: [70, 80.5, 100], science: [25, 20.1, 30] },
  { date: "21 Apr", maths: [64, 76, 80], science: [21, 25, 27] },
];

const table = document.getElementById("table");
const tableBody = document.getElementById("table-body");
const tableHeader = document.getElementById("table-header");
const tableSubHeader = document.getElementById("table-sub-header");

if (marks[0]) {
  const { date, ...subs } = marks[0];
  Object.keys(subs).forEach((sub) => {
    const th = document.createElement("th");
    th.textContent = sub;
    th.setAttribute("colspan", 3);
    tableHeader.appendChild(th);
    ["min", "val", "max"].forEach((subheading) => {
      const th = document.createElement("th");
      th.textContent = subheading;
      th.setAttribute("scope", "col");
      tableSubHeader.appendChild(th);
    });
  });

}

marks.forEach((mark) => {
  const tr = document.createElement("tr");
  const { date, ...subs } = mark;
  const th = document.createElement("th");
  th.textContent = date;
  th.setAttribute("scope", "row");
  tr.appendChild(th);
  Object.keys(subs).forEach((sub) => {
    const [min, val, max] = subs[sub];
    tr.innerHTML += `<td>${min}</td><td>${val}</td><td>${max}</td>`;
  });
  tableBody.appendChild(tr);

});

body {
  font-family: arial;

}

table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

td, th {
  padding: 0.5em;
  border: 1px solid black;
}

th {
  text-transform: capitalize;

}

<table id="table">
  <thead>
    <tr id="table-header"><th rowspan="2" scope="col">Date</th></tr>
    <tr id="table-sub-header"></tr>
  </thead>
  <tbody id="table-body">
  </tbody>
</table>

Show information in a table based on a unique identifier

Answer №1

Similar questions

Jquery fails to function properly unless the page is refreshed

Transmit live video feed captured by getUserMedia to a Node.js server and then forward it to the Google Cloud Platform speech API

Could someone assist me in understanding why VScode is displaying an error stating it cannot locate a module?

Create a versatile generic object using TypeScript

Show/Hide Row in Material-UI DataGrid

The error message "TypeError: Cannot read property 'map' of undefined when trying to set state as an array"

Extracting all usernames of members present in a specific voice channel and converting them into a string using Node.js on Discord

A web application using JavaScript and Node.js with a focus on creating a REST

Utilize an object model property as an array key for filtering in the AngularJS and MEANJS framework

What methods are available to me for creating a wrapper for an Angular Component that simply changes the component selector name?

Notification from HTML code within Django

Inadequate termination of the while loop

Different techniques for using percentages in CSS transformations to create dynamic animations for DOM element translations

Guide on Retrieving the Current URL in NodeJS

The template literal expression is being flagged as an "Invalid type" because it includes both string and undefined values, despite my cautious use of

Using React Higher Order Components with several different components

Enhance LCP Performance in Next.js for Faster Loading Speeds

Issues with basic emit and listener in socket.io

Bidirectional enumeration in TypeScript

conceal the "load more" option when no additional content is available for loading