Cleaning

Process

First

The first tries were difficult for me. I had to load the JSON file in my JS/HTML.

With help from Jordy I got it to work using Node.js. The code is used to make it work looked like this:

let survey = require('./data.json');
var oogKleur = survey.map(function (el) {return el.oogKleur});

console.log(oogKleur);

This code ensured I got the eye color data from the json file in my text editor's terminal. I was happy it worked, but I wanted it to show in the console of the browser. So I waited till Robert would explain how to do this, without using Node.js. I followed the lecture, but Robert couldn't figure it out. He was coding live so he tried some things, but it didn't work unfortunately. The next day Laurens had a lecture where he explained what he knew about running a local server without using Node.js. He used some code that set up a python local server, and this worked! It was a bummer that the command he used, didn't work for Windows 10, only for Mac OS. So I searched up how to do so on Windows 10. Happily I found this Stackoverflow post about it, and they used the command py -m http.server, which worked for me! So I decided to share this in the Microsoft Teams team of the course (Tech Track - JavaScript Support).

Last

Because I worked with the local HTTP python server, let survey = require('./data.json'); did not work anymore. So I had to use let surveyData = data. data is the name of the array with all the data in it, you can find in the file data.js (which has sensitive information). The data looks somewhat like this:

let data =
    [
      {
        "geboortedatum": "[dd-mm-yy]",
        "geboorteplaats": "[latitude, longitude]",
        "hoeveelheidBroers": "[?]",
      }
    ]

Functional programming in my code

.map

I used the following code to map and replace the data to valid hex codes. The data contained some dirty values like hex codes without a hashtag, some random white spaces, RGB codes and strings like 'blue'.

// Arrow function eye colors
const replaceAll = surveyAnswers.map(answer => answer[columnName]
    .replace("#", "")
    .replace(" ", "")
    .toUpperCase()
    .replace("BRUIN", hexBrown)
    // Replace blue and lightblue for 1 hex
    .replace("BLAUW", hexBlue)
    .replace("LICHT", "")
    .replace("GROEN", hexGreen)
    // Replace RGB for hex
    .replace("RGB", "")
    .replace(".", ",")
    .replace(rgbCode, (rgbToHex(139,69,19))) // Give the numbers to rgbToHex.. 139 = r, 69 = g, 19 = b
    .replace("", "#")
);

.filter

I filtered the data to see which colors were most common.

Code:

let showBrown = replaceAll.filter(answer => answer === "#" + hexBrown);
let showBlue = replaceAll.filter(answer => answer === "#" + hexBlue);

Outcome: