Testen met eigen naam

Eerst heb ik het geprobeerd met mijn eigen naam:

// Eerst de code los opgeschreven
//let mijnNaam = ("Manouk-Kappe"); 
//let mijnNaamLos = mijnNaam.split('-');
//let mijnNaamAanElkaar = mijnNaamLos.join(' ');

//console.log(mijnNaamAanElkaar); 

// Geprobeerd de code in 1 keer te schrijven
let mijnNaam = ("Manouk-Kappe")
    .split('-')
    .join(' ');

console.log(mijnNaam);

let mijnNaam = ("Manouk-Kappe")
  .replace('-', ' ');

console.log(mijnNaam);

Data uit de vragenlijst van school

Toen heb ik data gebruikt uit de survey.

Note: dat soort data (lange data) laat je in met hoge "quotes" >`

let viezeString = ` (hier stond de hele lijst in maar die laat ik er nu even uit omdat het heel lang is) `

// Ik heb gesplitst op de enter omdat er ook beroepen waren met meerdere woorden zoals lerares aan de hva.
let stringOpsplitten = viezeString.split('\n');

console.log(stringOpsplitten);

let viezeString = ` (hier stond de hele lijst in maar die laat ik er nu even uit omdat het heel lang is) `

let schoneString = viezeString
  .replace('-', 'niet ingevuld')
  .replace('nvt', 'niet ingevuld')
  .replace('', 'niet ingevuld')
  .replace(' ', 'niet ingevuld')
  .replace('/', 'niet ingevuld')
  .replace('N.v.t', 'niet ingevuld')
  .split('\n');

console.log(schoneString);

probleem opgelost 'eerste character wel veranderen, de rest niet'

Door de characters tussen / te zetten die je wilt veranderen en door daar een g achter te zetten verander je het globally. Met gi verander je het globally en is het niet hoofdletter gevoelig. Door alles te veranderen doe je:

.replace(/-/g, 'niet ingevuld')

Opnieuw begonnen met een persoonlijke prijzenlijst

Ik had een lijst met prijzen die ik op mijn favoriete lijstje had gezet. Ik wilde weten hoe duur het was als ik alles wilde kopen en toen dacht ik "Hey! Dat zijn we nu aan het leren" Dus heb ik voor deze lijst data gekozen.

Eerst had ik de lijst gesplit door .split te gebruiken. Toen wilde ik alle komma's veranderen naar punten omdat ik dacht dat ik dan numbers kreeg in plaats van strings(dit moest voor .split gebeuren, waarom weet ik nog niet). Toen ik in de console typeof deed kreeg ik alsnog string terug als resultaat. Via .map heb ik van alle strings een number gemaakt.

var lijst = `1,65
2,25
1,35
1,95
1,49
1,65
2,99
1,95
1,95
1,35
2,75
1,45
1,85
2,95
2,49
2,49
2,95`

//vervangt de komma's naar punten 
.replace(/,/g, '.')

//het is nu nog 1 lange string en nu zeg ik dat bij elke enter het moet splitten in meerdere strings
.split('\n')

//de items in de array waren eerst strings maar ik wil het in nummers
//note: als het goed is kan dit ook met parseInt
.map(Number)

//de waardes in een array zijn nu nog strings
console.log(typeof lijst[0])

Vervolgens wilde ik alle nummers bij elkaar optellen. Ik probeerde dit: zie voorbeeld hier onder. Alleen dat was niet wat ik wilde.

//https://developer.mozilla.org/nl/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const lijstOpgeteld = lijst.map(x => x + x);

Dit werkte niet dus probeerde ik zelf een function te schrijven. Die zag er zo uit: zie voorbeeld hieronder. Wat ik wilde doen was dat als de array meer dan 0 items bevatte, dat het zou lopen door array item 0 op zou tellen bij array item 1. Dit werkte ook niet dus ben ik naar Laurens gegaan.

lijst[0] = item1;
lijst[1] = item2;
var newLijst = lijst;

lijst.map({
  if (newLijst.length > 0) {
    let antwoord = item1 + item2;
    console.log(antwoord);
    return antwoord;
  } 
  else if () {
  console.log(newLijst);
  return newLijst;
  }
})

Laurens liet mij de code zien die ik moest gebruiken. Ik begreep nog niet helemaal hoe het werkte dus ben ik een filmpje gaan kijken die uitlegde hoe forEach werkt. Nu snap ik het veel beter! Filmpje: https://www.youtube.com/watch?v=Au7JCqkVq9M

//code van Laurens
//hoe kom ik aan item? ik pak de array en dan zeg ik voor elke... en die geef ik een naam dus nu item. 

var totaal = 0

lijst.forEach(item => {
  totaal = totaal + item
  console.log(totaal);
})

Voordat Laurens dit had geschreven had ik al eens forEach gebruikt. Zonder resultaat. Het probleem hier is, is dat ik geen 0 loop en zeg ik met de += teken eigenlijk dit newEntry = newEntry + entry; en dat hoeft niet want ik zeg daarboven al dat newEntry, entry is.

//https://stackoverflow.com/questions/9329446/for-each-over-an-array-in-javascript

lijst.forEach (function(entry){
  let newEntry = entry;
  newEntry += entry;
  console.log(newEntry);
  
})

Het werkt dus als een for loop alleen dan makkelijker geschreven! En in de console krijg ik uiteindelijk ook het resultaat wat ik zou willen. Laurens vertelde ook over reduce en dat dat ook een goede (veel snellere) oplossing zou zijn dus dat wilde ik ook nog proberen.

var lijst = `1,65
2,25
1,35
1,95
1,49
1,65
2,99
1,95
1,95
1,35
2,75
1,45
1,85
2,95
2,49
2,49
2,95`
//vervangt de komma's naar punten 
.replace(/,/g, '.')

//het is nu nog 1 lange string en nu zeg ik dat bij elke enter het moet splitten in meerdere strings
.split('\n')

//de items in de array waren eerst strings maar ik wil het in nummers
//note: als het goed is kan dit ook met parseInt
.map(function(getal){
  return Number(getal)
})

.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

Het is me gelukt om .reduce te gebruiken. Ik begrijp de code niet en zal het ook niet nu gebruiken maar het werkt wel. En ik krijg terug wat ik terug wil krijgen. Het is ook weer wat korter dan wat ik eerder heb geschreven. Nadat ik een filmpje van Wes Bos (https://www.youtube.com/watch?v=SadWPo2KZWg) had gekeken heb ik voor mezelf een duidelijkere reduce code geschreven. Het is voor mij nog niet helemaal duidelijk en het blijft een beetje magie maar het is nu wel leesbaarder wat het ietsje makkelijker maakt.

// met reduce loopt hij door de array heen en geeft het 1 waarde terug. ForEach laat nog alle stappen zien in de console. 
.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

// hier heb ik via het filmpje van Wes Bos een makkelijkere reduce geschreven. Dit maakt het iets duidelijker, ik begrijp het nog niet helemaal maar het is wel beter geschreven. 
.reduce((totaal, prijs) => totaal + prijs)

Ik heb tot nu toe mijn doel bereikt, data opschonen en uitrekenen wat het totale bedrag is. Ik heb nog even naar mijn code gekeken en wat namen aangepast zodat het makkelijker leesbaar is. dit is mijn uiteindelijke code geworden:

var prijzenLijst = `1,65
2,25
1,35
1,95
1,49
1,65
2,99
1,95
1,95
1,35
2,75
1,45
1,85
2,95
2,49
2,49
2,95`
//vervangt de komma's naar punten 
.replace(/,/g, '.')

//het is nu nog 1 lange string en nu zeg ik dat bij elke enter het moet splitten in meerdere strings
.split('\n')

//de items in de array waren eerst strings maar ik wil het in nummers
//note: als het goed is kan dit ook met parseInt
.map(function(getal){
  return Number(getal)
})

/*
// met reduce loopt hij door de array heen en geeft het 1 waarde terug. ForEach laat nog alle stappen zien in de console. 
.reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});
// hier heb ik via het filmpje van Wes Bos een makkelijkere reduce geschreven. Dit maakt het iets duidelijker, ik begrijp het nog niet helemaal maar het is wel beter geschreven. 
.reduce((totaal, prijs) => totaal + prijs)
*/
var divContainer = document.querySelector('.container');
var totaalPrijs = 0;


//hoe kom ik aan item? ik pak de array en dan zeg ik voor elke... en die geef ik een naam dus nu item. 
prijzenLijst.forEach(prijs => {
  totaalPrijs = totaalPrijs + prijs
  //hier print ik het uit in html zodat het makkelijk te zien is voor anderen
  console.log(totaalPrijs);
    // hier heeft mohammad me ermee geholpen! nu komen mijn resultaten op de site te staan
    var pElement = document.createElement('p');
    pElement.textContent = totaalPrijs;
    divContainer.appendChild(pElement);
})

//console.log(lijst)
console.log(totaalPrijs);
console.log(typeof prijzenLijst[0])
console.log(prijzenLijst.length)
// lijst.length.getElementsByTagName("h1");

CSV inladen ipv de hele lijst meegeven in javascript

Na aanleiding van het gesprek met Danny op vrijdag gaf hij mij de tip om er voor te zorgen dat je csv's kan inladen in plaats van de lijst met data. Zo kan je het beter updaten. Om dit "voor elkaar te krijgen" heb ik een youtube filmpje (bron in de code) gekeken en stap voor stap mee getypt en alles geïnstalleerd wat hij ook deed. Helaas is het niet gelukt. Ik had een node aangemaakt en in de node krijg ik wel de array terug te zien alleen in de console niet. Het pushen die ik heb gebruikt om te testen of ik nieuwe items erin kon zetten werkt ook in node.

Na een tijdje met d3 gewerkt te hebben merk ik dat d3 hiervoor echt ideaal was. Ik had verwacht dat je vrij makkelijk csv's in javascript kon inladen maar dit is nog wel lastig. Dit is wat mij tot nu toe is gelukt:

//filmpje die ik heb gevolgt om dit te doen: https://www.youtube.com/watch?v=hMwKfkaCdJU

const CSVToJSON = require('csvtojson');
const FileSystem = require('fs');

CSVToJSON().fromFile("prijzenLijstVoorDataOpschonen.csv").then(source => {
    source.push({
        'Titel': "Dit is een test",
        'Link': "www.test.nl",
        'Prijs': "100.00",
    });
    source.push({
        'Titel': "coole ketting",
        'Link': "www.bol.com",
        'Prijs': "19.95",
    });
    console.log(source);
});

Wat het probleem kan zijn

• Ik return niks.

Query data opschonen

voor mijn query hoefde ik niet tot nauwelijks op te schonen. Onder data in mijn readme kan je lezen wat ik heb gedaan met de data uit de database: https://github.com/ManoukK/functional-programming/blob/master/README.md