sanitize data

Table of Content

• Sanitize data 🧼
  • Retrieving the data 📥
  • Scrubbing it clean 🧽
    • To Lowercase
    • Remove Symbols 🚚
    • Finding the ghosts 👻
    • American🇺🇸 date to universal 🌍

Sanitize data 🧼

Data komt in allerlei vormen, maten, standaarden en dergelijke, hierom is het belangrijk om data op te schonen in een formaat dat jouw bedrijf, team of jijzelf het wilt gebruiken.

Dit was één van de delen van deze seminar, het opschonen van een enquête en hier iets zinvols van maken zodat het makkelijker te lezen valt dan de dataset zelf.

Retrieving the data 📥

Het eerste wat je wilt doen is de data zelf ophalen om dit vervolgens op te kunnen schonen. Dit kan op meerdere manieren.

// Ophalen van locale data
const DATASET = require('./tech-track-dataset.json')
// Ophalen van data uit een API of dergelijke (asynchronous)
fetch(`URL`)
  .then(response => response.json())
  .then(dataset => console.log(dataset))

Met het ophalen van de lokale dataset krijg je dan een array binnen van objecten (JSON) die er als volgt uit kan zien:

[
  {
    "Wat is je favoriete soort huisdier?": "kat",
    "Wat is je oogkleur?": "Bruin",
    "Wat is je favoriete windrichting?": "Oost",
    "Op een schaal van 1 tot 10, hoeveel zin heb je in de Tech Track?": 7,
    "Kies zelf of je deze vraag beantwoord.": "Oke",
    "Wat is je favoriete datum?": "15/01/1999",
    "Wat is je favoriete datum, maar nu in tekst!": "vijftien januari negentiennegenennegentig",
    "Wat is je favoriete zuivelproduct?": "Melk",
    "Welke kleur kledingstukken heb je aan vandaag? (Meerdere antwoorden mogelijk natuurlijk...)": "Zwart, Grijs",
    "Op welke verdieping van het TTH studeer je het liefst?": 2,
    "Wat wil je worden als je groot bent?": "Frontend developer",
    "Wat wilde je later worden als je groot bent, maar nu toen je zelf 8 jaar was.": "Piloot",
    "Kaas is ook een zoogdier?": "Wat.",
    "Als je later een auto zou kopen, van welk merk zou deze dan zijn?": "Mercedes C63 AMG"
  },
//...
]

Scrubbing it clean 🧽

Zoals wellicht te zien zijn er onenigheden in de dataset zoals hoofdletters, symbolen, amerikaanse dates, of lege waarden. Dit willen we bijvoorbeeld niet hebben bij het visualiseren van data met D3.js. Zo wil ik bijvoorbeeld dat alle strings in kleine letters zijn.

To Lowercase

Belangrijk is eerst om te kijken als de datatype daadwerkelijk een string is. Vervolgens kan ik dan de data manipulatie doen om het in lowercase te zetten.

const toLowerCase = (string) => {
  if (typeof string === 'string') {
    return string.toLowerCase()
  } else {
    return string
  }
}

Remove Symbols 🚚

Symbolen die ik niet leuk vind wil ik verwijderd hebben, op deze manier blijven de datatypes pure strings en kan er ook geen rare dingen gebeuren indien ik het zou gebruiken in een applicatie. Dit kan bijvoorbeeld handig zijn als de applicatie inputvelden heeft.

const removeSymbols = (string) => {
  const REGEX = /[^A-Za-z0-9\s]/g
  if (typeof string === 'string') {
    return string.replaceAll(REGEX, '')
  } else {
    return string
  }
}

Finding the ghosts 👻

Soms kunnen particpanten erg vervelend zijn en input niet invullen en als dit niet gecheckt wordt heb je dan lege velden in je dataset. Dat kunnen we natuurlijk ook niet hebben dus daar moeten we op controleren en invullen. Hiervoor heb ik de volgende functie geschreven. Het controleert als de string leeg is en vult deze in anders laat ie de waarde met rust.

const replaceEmptyValue = (string) => {
  return string === '' ? string = 'nvt' : string = string
}

American🇺🇸 date to universal 🌍

Datums kunnen in verschillende manieren ingevuld worden, hebben verschillende standaarden en kan voor ontzettend veel hoofdpijn verzorgen. Dit is natuurlijk niet leuk en willen we eigenlijk gestandardiseerd hebben, Dit gaat in vele gevallen goed, maar afhankelijk van waar de data vandaan komt kan het toch anders. Hierom check is als de waarde een datum formaat heeft en vervolgens transformeer ik deze naar een locale data formaat.

const isDate = (date) => {
  return (new Date(date) !== "Invalid Date") && !isNaN(new Date(date));
}

/**
 * @title Convert date format to local date format.
 * @param {Date} date Date written in any manner, returns date in local date format. 
 * @returns {String} local date format in the datatype string
 */
const toLocalDateFormat = (date) => {
  let checkDate = new Date(date)
  return isDate(checkDate) ? checkDate.toLocaleDateString() : checkDate
}