How to render a table from a database in typescript

Question

I'm a bit of a novice coder and I'm struggling to get some data to display in a table on a web page. This feels like it should be basic, but I just can't quite get the display right.

The data in the DB has the following fields, with each row containing data that will need to become a column heading (round) and a row heading (Ate) in the final rendered table.

Code,Ate,Round,Value,Active
ZOM3,Ears,16,18,True
ZOM4,Ears,16,22,True
ZOM4,Knees,16,24,True
ZOM4,Arms,16,90,True
ZOM4,Brains,16,940,True
ZOM4,Ears,17,29,True
ZOM4,Arms,17,114,True
ZOM4,Brains,17,746,True
ZOM4,Ears,18,23,True
ZOM4,Shins,18,1930,True
ZOM4,Arms,18,135,True
ZOM4,Brains,18,952,True
ZOM4,Ears,19,22,True
ZOM4,Shins,19,580,True
ZOM4,Knees,19,32,True
ZOM4,Arms,19,139,True
ZOM5,Shins,18,14,True

For character ZOM4, the way I need this to present on a web page is in a table like this. I will display one of the characters at a time (ZOM4):

	16	17	18	19
Arms	90	114	135	139
Brains	940	746	952
Ears	22	29	23	22
Knees	24			32
Shins			1930	580

Sadly, my code does not. In the .vue file I have the following code, which ignores the null/missing Value values so that ZOM4 displays 1930 Shins in round 16 instead of round 18.

const props = defineProps<{
  data?: CharacterDetail;
}>();

const eats = computed(() => {
  if (!props.data) return {};

  const d = {} as { [key: string]: { rounds: { [key: string]: any } } };

  for (let x of props.data.roundlyData) {
    if (!d[x.ate]) {
      d[x.ate] = { rounds: {} };
    }

    d[x.ate].rounds[x.round] = x.value;
  }

  return d;
});

const rounds = computed(() => {
  const t = Object.keys(eats.value)[0];
  if (!t) return [];

  return Object.keys(eats.value[t].rounds);
});
</script>

<template>
  <table class="triage-table">    <!-- might need to sort the above data by ate and/or by round before presenting it. Test with Co. WPL -->
    <colgroup>
      <col style="width: 60px" />
    </colgroup>
    <thead>
      <tr v-if="rounds">
        <th></th>
        <th v-for="round of rounds" :key="round">{{ round }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(t, ate) of eats" :key="ate">
        <td>{{ ate }}</td>
        <td v-for="r in t.rounds" :key="r">{{ r }}</td>
      </tr>
    </tbody>
  </table>
</template>

This is driving me crazy. I understand what's going wrong, but not how to make it right. I'm deliberately trying not to hard code the row or column headings as those details may change or expand later as I play more with this idea.

Can someone please help me get the table to display in a way that respects the nulls/missing data. Thanks

I think you are missing a key part in your application. What you are doing is some kind of pivot table. So I would suggest to create a server endpoint that delivers this grouped data. Additionally you might want to take a look into lodash groupBy lodash.com/docs/4.17.15#groupBy and other functions helpful functions — DaSch
– DaSch, Commented Jun 21, 2022 at 11:13
Given I understand the C# view model better than I understand what I'm doing in vue, you may be onto something there @DaSch — Dave F
– Dave F, Commented Jun 22, 2022 at 22:17
I wrote something that did this in the controller in C#, which feeds the front end with a full set of data with any gaps filled with null — Dave F
– Dave F, Commented Jun 26, 2022 at 5:38

LinkeKlebe · Accepted Answer · 2022-06-28 13:10:33Z

1

Looks like your data is arms.rounds=[16:90,17:114,18:135,19:139] and shins.rounds=[18:1930,19:580].
In your Loop

 <td v-for="r in t.rounds" :key="r">{{ r }}</td> ....

you get just two entries for the shins, because you do not loop over [16,17,18,19] but the entries of rounds. So either ensure that the entries 16 and 17 are set to null in shins or loop over [16,17,18,19] and display the data accordingly if empty.

Couldn't figure out what your rounds function really does, guessing the numbers [16,17,18,19] depending on the data, but maybe you should use something like

<td v-for="r in rounds" :key="r" >{{ t.rounds[r] }}</td>

edited Jun 28, 2022 at 13:10

answered Jun 21, 2022 at 6:23

LinkeKlebe

862 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dave F Over a year ago

"loop over [16,17,18,19] and display the data accordingly if empty", is what I'd like to do, but I'm not confident with how

Dave F Over a year ago

In the C# view model I did build such a loop. There was probably a way in vue/ts, but I'm very, very inexperienced there

LinkeKlebe Over a year ago

Sounds like you couldn't figure it out

Dave F Over a year ago

Not in vue/TS, no. I did it in C# instead before the view model

Dave F · Accepted Answer · 2022-06-28 21:14:07Z

0

While someone posted then withdrew an answer in TS that appeared to work in their demo code, I couldn't get it to work. Instead, I did as @DaSch suggested and modified the data in the MVC C# code to pass the complete set to the front end.

So, if you're trying to solve this problem yourself, solve it in the back end.

answered Jun 28, 2022 at 21:14

Dave F

16117 bronze badges

Collectives™ on Stack Overflow

How to render a table from a database in typescript

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related