Week 1
The following array contains multiple data types. Normalize them by converting them all to numbers using a function and log the result in the console
|
Given Example |
My Solution |
|---|---|
const data = [
1,
2,
"3",
"4",
5
]
function convertArrayStringsToNumbers() {
/* Your code here should convert the data array to
an array containing only numbers and no strings
and log the code to the console. */
}
convertArrayStringsToNumbers(); |
const data = [
1,
2,
"3",
"4",
5
]
function convertArrayStringsToNumbers() {
/* convert the array into only numbers */
let newArray = data.map(Number);
/* log the array */
console.log(newArray);
}
convertArrayStringsToNumbers(); |
The following array contains strings with randomized capitals. You're tasked with converting all strings to lowercase with a first letter capitalized
|
Given Example |
My Solution |
|---|---|
const data = [
"robert",
"vincent",
"lAuRa",
"Cas",
"wIMER",
"rOOs"
];
/* This should the result be:
const data = [
"Robert",
"Vincent",
"Laura",
"Cas",
"Wimer",
"Roos"
];
*/
function convertArrayStringsToCapitalized() {
/* Write your functionality here and log the result */
}
convertArrayStringsToCapitalized(); |
const data = [
"robert",
"vincent",
"lAuRa",
"Cas",
"wIMER",
"rOOs"
];
function convertArrayStringsToCapitalized() {
/* Make a new array and convert first item into a upper case then the other characters should get a lower case */
const newArray = data.map(string => string.charAt(0).toUpperCase() + string.slice(1).toLowerCase());
console.log(newArray);
}
convertArrayStringsToCapitalized(); |
This array of objects contains some weird data, and some useless points, You're tasked in transforming and normalizing this data to the second example
|
Given Example |
My Solution |
|---|---|
const data = [
{
name: "robert",
age: "29",
residence: "amsterdam",
work: {
title: "Lecturer",
employer: "Hogeschool van Amsterdam"
}
},
{
name: "berend",
age: "32",
residence: "rotterdam",
work: {
title: "Front-end Developer",
employer: "DEPT"
}
},
{
name: "ubaida",
age: "26",
residence: "Amersfoort",
work: {
title: "Project Manager",
employer: "Clarify"
}
}
];
/* Filter by age, normalize capitals in names, convert ages to
numbers, remove work.
const data = [
{
name: "Robert",
age: 29,
residence: "Amsterdam",
},
{
name: "Berend",
age: 32,
residence: "Rotterdam",
}
];
*/
function transformArrOfObj() {
/* Write your functionality here and log the result */
} |
const data = [
{
name: "robert",
age: "29",
residence: "amsterdam",
work: {
title: "Lecturer",
employer: "Hogeschool van Amsterdam"
}
},
{
name: "berend",
age: "32",
residence: "rotterdam",
work: {
title: "Front-end Developer",
employer: "DEPT"
}
},
{
name: "ubaida",
age: "26",
residence: "Amersfoort",
work: {
title: "Project Manager",
employer: "Clarify"
}
}
];
function transformArrOfObj(data) {
return data
/* when age is not a number you can filter out that whole object
.filter(item => !isNaN(Number(item.age)))
*/
.map(obj => ({
name: obj.name.charAt(0).toUpperCase() + obj.name.slice(1).toLowerCase(),
age: Number(obj.age),
residence: obj.residence
}));
}
const transformedData = transformArrOfObj(data); // Call the function and capture the result.
console.log(transformedData); // Log the transformed data.
/* or console.log(transformArrOfObj(data)); */
|
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(); |