Week 1: opdrachten donderdag
We only need one function for this, in further exercises, we can try and splitting them but for now, we'll only use a single function
|
Given Example |
My Solution |
|---|---|
/* Before we start, please use the following HTML in your codepen or
environment of your choice to continue this assignment
<!-- We start by creating the basics for a table -->
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
*/
/* Assume we have a normalized dataset to start with */
const data = [
{
id: 1,
name: 'Robert',
kaas: true,
},
{
id: 2,
name: 'Vincent',
kaas: false,
},
{
id: 3,
name: 'Laura',
kaas: true,
},
]
/* We only need one function for this, in further exercises, we can try and splitting them
but for now, we'll only use a single function
*/
function generateTable() {
/* There are a couple steps we need to take, first, we need to select
the table, table heading and table body and save them to a variable
/*
/* First, we'll generate a row of table headings, we need to grab the keys
from all the objects, not the values! We can achieve this by using the
Object.keys(data[0]) method of the native Object. It returns an array of all
keys an object contains. We can loop over that array using forEach();
It's up to you to find out how then to generate the corresponding HTML.
*/
/* Your HTML should now display the headers in a <th></th> structure. */
/* After this, we can loop over the amount of objects inside of the array
(looping over an array of objects can be useful here, for...of). For every entry (forEach())
we want to create a new row (<tr>/tr>) and append three datapoints (<td>)
inside of it containing the id, name and kaas.
*/
}
generateTable() |
const data = [
{
id: 1,
name: 'Robert',
kaas: true,
},
{
id: 2,
name: 'Vincent',
kaas: false,
},
{
id: 3,
name: 'Laura',
kaas: true,
},
]
function generateTable() {
let table = document.querySelector('table')
let thead = document.querySelector('thead tr')
let tbody = document.querySelector('tbody')
/* Generate the table headers in a variable for all the keys */
const tableHeaders = Object.keys(data[0])
// for every key in the table I need to create an "th" and then append it to the thead
tableHeaders.forEach(key => {
const th = document.createElement("th")
th.textContent = key
thead.appendChild(th)
});
/* Generate table rows for the data */
data.forEach(value => {
// create a new element where the value can be placed in
const row = document.createElement("tr")
tbody.appendChild(row)
// for every value in a key, create a "td" for every value
for (const key in value) {
const cell = document.createElement("td");
cell.textContent = value[key];
row.appendChild(cell);
}
});
console.log(table)
}
generateTable(); |
Assume we have a non-normalized dataset to start with
|
Given Example |
My Solution |
|---|---|
/* Before we start, please use the following HTML in your codepen or
environment of your choice to continue this assignment
<!-- We start by creating the basics for a table -->
<table>
<thead>
<tr>
</tr>
</thead>
<tbody>
</tbody>
</table>
*/
/* Assume we have a non-normalized dataset to start with */
const data = [
{
id: 1,
name: 'ROBERT',
kaas: false,
coords: {
lat: "52.3676",
long: "4.9041"
}
},
{
id: "2",
name: 'viNcent',
kaas: "true",
coords: {
lat: "52.3676",
long: "4.9041"
}
},
{
id: 3,
name: 'laura',
kaas: true,
coords: {
lat: "52.3676",
long: "4.9041"
}
},
]
/* This assignment builds on the earlier assignment we did today. Create a table
containing the above dataset, this time though, the dataset is a bit scuffed.
We need to normalize the data by addressing the following issues:
1) The id is not always a number, convert it to an integer / number first.
2) The name isn't normalized, random capitals appear. Change this string in a
first letter capital and lowercase after that
3) "kaas" is not always a boolean. Convert it to a string so we can print it in HTML
4) "coords" is an object. If you try and print this, you'll get [object Object] or something.
We'll have to loop over the object and print a custom string using template literals.
*/
function generateTable() {
/* Continue using the code from thursday-1.js */
}
generateTable() |
/* Assume we have a normalized dataset to start with */
const data = [
{
id: 1,
name: 'ROBERT',
kaas: false,
coords: {
lat: "52.3676",
long: "4.9041"
}
},
{
id: "2",
name: 'viNcent',
kaas: "true",
coords: {
lat: "52.3676",
long: "4.9041"
}
},
{
id: 3,
name: 'laura',
kaas: true,
coords: {
lat: "52.3676",
long: "4.9041"
}
},
]
function transformArrOfObj(data) {
return data.map(obj => ({
id: parseInt(obj.id), // Ensure 'id' is always a number
name: obj.name.charAt(0).toUpperCase() + obj.name.slice(1).toLowerCase(),
kaas: String(obj.kaas), // Ensure 'kaas' is always a string
Lat_coords: parseFloat(obj.coords.lat), //just gives the lat in numbers, no custom text possible
Long_coords: `Long: ${obj.coords.long}` // Customize with text, it then becomes a string instead of Integer
}));
}
const transformedData = transformArrOfObj(data); // Transform the data array
function generateTable() {
let table = document.querySelector('table')
let thead = document.querySelector('thead tr')
let tbody = document.querySelector('tbody')
/* Generate the table headers in a variable for all the keys */
const tableHeaders = Object.keys(transformedData[0]);
// for every key in the table I need to create a "th" and then append it to the thead
tableHeaders.forEach(key => {
const th = document.createElement("th");
th.textContent = key;
thead.appendChild(th);
});
/* Generate table rows for the transformed data */
transformedData.forEach(value => {
// create a new element where the value can be placed in
const row = document.createElement("tr");
tbody.appendChild(row);
// for every value in a key, create a "td" for every value
for (const key in value) {
const cell = document.createElement("td");
cell.textContent = value[key];
row.appendChild(cell);
}
});
console.log(table)
}
generateTable(); |