Sorteren in JavaScript

met data uit een JSON-bestand

van klein naar groot

Stappenplan

  1. JSON importeren & uitvoeren in HTML
  2. JSON omzetten naar JS-object: data
  3. sorteren op eigenschap in JS-object
  4. boeken-object maken;
    eigenschappen:
    • de eigenschap waarop gesorteerd moet worden;
    • oplopend of aflopend
    • de data uit JSON
    methods:
    • sorteren van de data op eigenschap
    • uitvoeren van HTML in de html-pagina

Opbouw JSON


[
   {
      "titel": "Summerproof met Sonja",
      "cover": "https://s.s-bol.com/imgbase0/imagebase3/large/FC/0/7/3/5/9200000110145370.jpg",
      "auteur": ["Sonja Bakker"],
      "uitgave": "mei 2019",
      "paginas": 104,
      "taal": "Nederlands",
      "ean": "9789078211433"
   },
   {
      "titel": "Front-End Web Development a Complete Guide",
      "cover": "https://s.s-bol.com/imgbase0/imagebase3/large/FC/7/3/1/7/9200000096507137.jpg",
      "auteur": ["Gerardus Blokdyk"],
      "uitgave": "juli 2018",
      "ean": "9780655315254",
      "paginas": 274,
      "taal": "Engels"
   },
   {
      "titel": "Delft design guide",
      "cover": "https://s.s-bol.com/imgbase0/imagebase3/large/FC/8/6/6/6/9200000014636668.jpg",
      "auteur": ["Yvo Zijlstra", "Jaap Daalhuizen", "Roos van der Schoor", "Annemiek van Boeijen"],
      "uitgave": "september 2013",
      "ean": "9789063693275",
      "paginas": 176,
      "taal": "Engels"
   }
]

Download: https://github.com/Theo-denBlanken/boekJSON/blob/master/boeken.json

het XMLHttpRequest -object

gebruikte eigenschappen:

  • readyState
  • status
  • responseText

gebruikt event:

  • onreadystatechange

gebruikte methods:

  • open()
  • send()

Stukje van het object


// object dat de boeken uitvoert en sorteert en data bevat
let sorteerBoekObj = {
   data: "",  // komt van xmlhttp-request

   sorteren: function() {
      this.data.sort();
      this.uitvoeren();
   },

   uitvoeren: function() {
      let uitvoer = "";
      for( let i=0; i<this.data.length; i++) {
         uitvoer += this.data[i].auteur[0] + "
"; } document.getElementById('uitvoer').innerHTML = uitvoer; } }

Array sorteren met JS

  • mijnArray.sort(); sorteert al een array
  • werkt dan als strings en oplopend
  • met een functie, (vaak als => en met een ternary-operator) kun je dat naar believen opmaken

Opdracht en instructie

https://blanken5.home.xs4all.nl/sorteerJSON.html

wordt vervolgd...