🧽 Week 1: dataset cleaning

Wat was de opdracht?

De opdracht was om van de dataset die we met z'n allen hebben gemaakt een schone dataset te maken om vervolgens iets te kunnen doen met deze data.

Wat wilde ik maken?

Ik had in de slides een voorbeeld gezien van oogkleuren, dit leek mij erg interessant om zelf te proberen aangezien je data gaat omzetten van woorden naar daadwerkelijke kleurtjes.

Hoe heb ik dit gedaan?

Ik vind het makkelijker om code uit te leggen door het in de code te vertellen aan de hand van comments dus in de snippet hieronder de toelichting:

const url = "https://raw.githubusercontent.com/cmda-tt/course-21-22/main/tech-track-dataset.json";
let ul = document.createElement("ul");
const body = document.getElementsByTagName("body");

// lookUpTable
let hexArr = [
  {
    kleur: "blauw",
    hex: "#17c0eb",
  },
  {
    kleur: "groen",
    hex: "#32ff7e",
  },
  {
    kleur: "bruin",
    hex: "#865439",
  },
  {
    kleur: "grijs",
    hex: "#716F81",
  },
  {
    kleur: "donkerbruin",
    hex: "#483434",
  },
];

const parseData = async () => {
// hier maak ik een nieuwe promise aan, een promise is eigenlijk een belofte voor de toekomst. We verwachten dus dat er data terugkomt of een 
// error mocht er iets misgaan
  return new Promise((resolve, reject) => {
    fetch(url).then((response) => {
// hier resolve (return) ik de data indien deze statuscode 200 heeft, resolve is een promise parameter
      if (response.ok) resolve(response.json());
      else {
// hier reject ik de promise mocht het niet gelukt zijn, hier stopt de chain dan ook
        reject(new Error("Er is iets misgegaan in de api"));
        window.alert("Helaas is er iets misgegaan...");
      }
    });
  })
    .then((res) => {
      // res is het object dat de resolve door heeft gegeven aan .then
      // functie om de antwoorden uit de vragen te filteren
      let answers = getAnswersMethod(res);
      // als dit gelukt is geef het 'nieuwe' object door
      return answers;
    })
    .then((colors) => {
      // colors is nu het answers object uit de vorige .then deze data is nu gefilterd en hiermee gaan we verder
      // een functie om de kleur naam (het antwoord) te koppelen aan een hex kleurcode
      let hexCodes = connectColorToHex(colors);
      console.table(hexCodes);
      return hexCodes;
    })
    .then((table) => {
      // dit is de laatste stap in de chain en hier heb ik de data die ik nodig heb om het doel te bereiken, namelijk een tabel maken met de 
      // hexcodes
      let colorTable = createColorTable(table);
    });
};

const connectColorToHex = (obj) => {
  let colorValues = [];
  // zet de values in alfabetische volgorde
  obj.sort();
  // zoek de bijbehorende hex kleur op basis van de naam, hierbij gebruik ik de lookUpTable bovenaan de code
  for (let i = 0; obj.length > i; i++) {
    let myObj = hexArr.find((col) => col.kleur === obj[i]);
    colorValues.push(myObj);
  }
  
  // return het nieuwe object
  return colorValues;
};

const createColorTable = (obj) => {
  // vervolgens wil ik de schone data in een tabel laten zien in de dom
  let table = document.createElement("table");
  obj.forEach((element) => {
    const tr = table.insertRow();
    const td = tr.insertCell();
    td.appendChild(document.createTextNode(element.hex));
    td.style.border = "2px solid" + element.hex;
    td.classList.add(element.kleur);
  });

  document.body.appendChild(table);
};

parseData();

Resultaat

Dit is het uiteindelijke resultaat van de eerste week: Week 1: resultaat

Wishlist

Er waren nog een paar dingetjes die ik graag had willen doen namelijk:

• Per kleur een kolom maken zodat je een soort bar chart krijgt.
• De functie colorToHex refactoren aangezien ik nu een nieuw object maak en deze return, volgensmij kan dit netter door me for loop te returnen maar dat weet ik niet zeker