neuryzonso
Reputation: 27
Sveltekit Display API Data
I want to display the data from an API into a table group. However, I am having trouble coming up with a logic to displaying the data into a table by group.
For example tables like theses (images).
The API response
{
"data": [
{
"id": 10,
"position": 1,
"points": 0,
"status": "",
"player": {
"id": 18,
"gender": "male",
"name": "Andrew",
"image": "",
"dob": "",
"nationality": "",
"placeholder": false
},
"phase": {
"id": 200,
"name": "First Round",
"finished": false,
"starting": "",
"ending": "",
"groups": [
{
"id": 100,
"phaseId": 300,
"name": "Group Blue",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 101,
"phaseId": 301,
"name": "Group Red",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 102,
"phaseId": 302,
"name": "Group Green",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 103,
"phaseId": 303,
"name": "Group Yellow",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
}
]
},
"group": {
"id": 100,
"phaseId": 300,
"name": "Group Blue",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
"details": [
{
"id": 1,
"value": 0,
"name": "Geography"
},
{
"id": 2,
"value": 0,
"name": "Mathematics"
},
{
"id": 3,
"value": 0,
"name": "Arts"
}
]
},
{
"id": 20,
"position": 1,
"points": 0,
"status": "",
"player": {
"id": 30,
"gender": "male",
"name": "Gerry",
"image": "",
"dob": "",
"nationality": "",
"placeholder": false
},
"phase": {
"id": 200,
"name": "First Round",
"finished": false,
"starting": "",
"ending": "",
"groups": [
{
"id": 100,
"phaseId": 300,
"name": "Group Blue",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 101,
"phaseId": 301,
"name": "Group Red",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 102,
"phaseId": 302,
"name": "Group Green",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 103,
"phaseId": 303,
"name": "Group Yellow",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
}
]
},
"group": {
"id": 101,
"phaseId": 300,
"name": "Group Red",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
"details": [
{
"id": 1,
"value": 0,
"name": "Geography"
},
{
"id": 2,
"value": 0,
"name": "Mathematics"
},
{
"id": 3,
"value": 0,
"name": "Arts"
}
]
},
{
"id": 30,
"position": 1,
"points": 0,
"status": "",
"player": {
"id": 56,
"gender": "male",
"name": "David",
"image": "",
"dob": "",
"nationality": "",
"placeholder": false
},
"phase": {
"id": 200,
"name": "First Round",
"finished": false,
"starting": "",
"ending": "",
"groups": [
{
"id": 100,
"phaseId": 300,
"name": "Group Blue",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 101,
"phaseId": 301,
"name": "Group Red",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 102,
"phaseId": 302,
"name": "Group Green",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 103,
"phaseId": 303,
"name": "Group Yellow",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
}
]
},
"group": {
"id": 100,
"phaseId": 300,
"name": "Group Blue",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
"details": [
{
"id": 1,
"value": 0,
"name": "Geography"
},
{
"id": 2,
"value": 0,
"name": "Mathematics"
},
{
"id": 3,
"value": 0,
"name": "Arts"
}
]
},
{
"id": 40,
"position": 2,
"points": 0,
"status": "",
"player": {
"id": 60,
"gender": "female",
"name": "Jane",
"image": "",
"dob": "",
"nationality": "",
"placeholder": false
},
"phase": {
"id": 200,
"name": "First Round",
"finished": false,
"starting": "",
"ending": "",
"groups": [
{
"id": 100,
"phaseId": 300,
"name": "Group Blue",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 101,
"phaseId": 301,
"name": "Group Red",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 102,
"phaseId": 302,
"name": "Group Green",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
{
"id": 103,
"phaseId": 303,
"name": "Group Yellow",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
}
]
},
"group": {
"id": 101,
"phaseId": 300,
"name": "Group Red",
"starting": "2018-11-16",
"ending": "2020-06-11",
"finished": "false"
},
"details": [
{
"id": 1,
"value": 0,
"name": "Geography"
},
{
"id": 2,
"value": 0,
"name": "Mathematics"
},
{
"id": 3,
"value": 0,
"name": "Arts"
}
]
}
]
}
This the sveltekit code
+Page.svelte
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
$: classes = data?.classes;
</script>
<h1>Class Scores</h1>
<table>
<tr>
<th>Pos.</th>
<th>Name</th>
<th>Geography</th>
<th>Mathematics</th>
<th>Art</th>
</tr>
</table>
<!-- <ul>
{#each classes as points}
<li>{points}</li>
{/each}
</ul> -->
+Page.ts
import type { PageLoad } from "./$types";
export const load = (async ({ fetch }) => {
const response = await fetch(`http://localhost:3000/data`)
const classes = await response.json();
console.log(classes);
return {
classes
}
}) satisfies PageLoad
Any help to lead me into the right direction, would be helpful.
Upvotes: 0
Views: 124
Answers (1)
neuryzonso
Reputation: 27
I was able to create the table (sort of), just CSS now. Not the best way, but it did the trick.
As mention by @Stephane, I did 'postprocess' the data where I grouped the response from the API by the group name.
+Page.ts
import type { PageLoad } from "./$types";
export const load = (async ({ fetch }) => {
const response = await fetch(`http://localhost:3000/data`)
const classes = await response.json();
let result = classes.reduce(function (r:any,a:any) {
r[a.group.name] = r[a.group.name] || [];
r[a.group.name].push(a);
return r
}, Object.create(null));
console.log(result);
return {
result
}
}) satisfies PageLoad
+Page.svelte
<script lang="ts">
import type { PageData } from './$types';
export let data: PageData;
$: classes = data?.result;
</script>
<h1>Class Scores</h1>
<table>
<tr>
<td>{classes['Group Blue'][0].group.name}</td>
</tr>
<tr>
<th>Pos.</th>
<th>Name</th>
<th>Geography</th>
<th>Mathematics</th>
<th>Art</th>
<th>Total Pts</th>
</tr>
{#each classes['Group Blue'] as { position, points, player, details }}
<tr>
<td>{position}</td>
<td>{player.name}</td>
<td>{details[0].value}</td>
<td>{details[1].value}</td>
<td>{details[2].value}</td>
<td>{points}</td>
</tr>
{/each}
</table>
<table>
<tr>
<td>{classes['Group Blue'][0].group.name}</td>
</tr>
<tr>
<th>Pos.</th>
<th>Name</th>
<th>Geography</th>
<th>Mathematics</th>
<th>Art</th>
<th>Total Pts</th>
</tr>
{#each classes['Group Red'] as { position, points, player, details }}
<tr>
<td>{position}</td>
<td>{player.name}</td>
<td>{details[0].value}</td>
<td>{details[1].value}</td>
<td>{details[2].value}</td>
<td>{points}</td>
</tr>
{/each}
</table>
Result
Upvotes: 0
Related Questions
- 400 vs 422 response to POST of data
- SvelteKit - api response data (PageData) not updated after initial render
- Use of PUT vs PATCH methods in REST API real life scenarios
- How do I POST JSON data with cURL?
- Pass an array of integers to ASP.NET Web API?
- Posting a File and Associated Data to a RESTful WebService preferably as JSON