Web Scripting

# JSON

JSON staat voor “JavaScript Object Notation”. Het is een dataformaat dat gemakkelijk door mensen kan worden gelezen en geschreven. JSON is een taalonafhankelijk gegevensformaat.

  • Leesbaarheid: JSON-gegevens zijn gestructureerd als paren van keys en values. Het formaat is eenvoudig te begrijpen en te schrijven voor mensen.
  • Ondersteuning voor verschillende gegevenstypen: JSON ondersteunt basistypen zoals getallen, strings, booleans, arrays en objecten. Hierdoor kunnen complexe gegevensstructuren worden gerepresenteerd.
  • Onafhankelijk van programmeertaal: JSON is taalonafhankelijk en wordt ondersteund door vele programmeertalen, waaronder JavaScript, Python, Java, C#, en meer.
  • Makkelijk te converteren: JSON-gegevens kunnen eenvoudig worden geconverteerd naar JavaScript-objecten en omgekeerd. Dit maakt het handig voor het uitwisselen van gegevens tussen een server en een webclient.

Leuke en handige online JSON services

# Syntax

JSON bevat de volgende vorm:

  • Een object is een ongeordende lijst van key/valueparen en begint met een { en eindigt met een }
  • Elke keywordt gevolgd door een : (dubbelpunt)
  • De paren worden gescheiden door een , (comma)
  • Een keyis altijd een string en begint met een " en eindigt met een "
  • De value kan de volgende datatypen bevatten: string, number, object, array, boolean of null

# Number

Een Number datatype is een positief- of negatief decimaal getal met een dubbele-precisie floating-point formaat (maximaal 9 digits).

{
  "stock": -1.659,
  "speed": 125
}
1
2
3
4

# Boolean

Een Boolean datatype bevat de waarde true of false.

{
  "isFemale": true
}
1
2
3

# Null

Een Null datatype vertegenwoordigt een lege waarde en bevat null als waarde.

{
  "data": null
}
1
2
3

# Array

Een Array datatype is een geordende lijst van waarden. Een Array kan 0 tot n waarden bevatten. Een Array begint altijd met [ en eindigt met een ]. De waarden binnen een Array worden gescheiden door een comma ,. Mogelijke datatypen voor een waarde: string, number, boolean, array, object of null.

"names" : ["Linus", "Bill", "Steve"]
1

# Object

Een Object datatype is een ongeordende associatieve array. Een associatieve array bevat “key/value” paren. Een object wordt omsloten door een { en }.

{
  "address": {
    "street": "Industrieweg 232",
    "city": "Mariakerke",
    "country": "Belgium",
    "postalCode": "9000"
  }
}
1
2
3
4
5
6
7
8

Als voorbeeld gaan we een persoon declareren via JSON. Een persoon heeft een voornaam, familienaam, lengte, gewicht, geslacht, thuisadres en een werkadres.

{
  "firstName": "John",
  "lastName": "Doe",
  "height": 1.72,
  "weight": 65.3,
  "isFemale": false,
  "addresses": [
    {
      "type": "company",
      "street": "El Camino",
      "city": "Los Angeles",
      "country": "USA"
    },
    {
      "type": "home",
      "street": "Regent Street",
      "city": "London",
      "country": "United Kingdom"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# JSON-Object

Het JSON-object in JavaScript verwijst naar het ingebouwde object JSON, dat twee belangrijke methoden bevat:

  • JSON.stringify()
  • JSON.parse().

Het JSON-object biedt een eenvoudige manier om gegevens te converteren tussen JSON-notatie en JavaScript-objecten. Deze functionaliteit is handig bij het communiceren met servers, het opslaan van configuratiegegevens, en andere situaties waarin gegevensuitwisseling in JSON-formaat plaatsvindt.

# Conversie van JavaScript to JSON String

Met de JSON.stringify() methode kunnen we een JavaScript object converteren naar een JSON string:

const person = { name: "John", age: 30, city: "New York" };
const jsonString = JSON.stringify(person);
console.log(jsonString);
// Output: {"name":"John","age":30,"city":"New York"}
1
2
3
4
const person = {
  firstName: "John",
  surName: "Doe",
  toString: function () {
    return `${this.firstName} ${this.surName}`;
  },
  completeTask(task) {
    return `Task "${task}" completed!`;
  },
};
const jsonPerson = JSON.stringify(person);
console.log(jsonPerson); // {"firstName":"John","surName":"Doe"}
1
2
3
4
5
6
7
8
9
10
11
12
const car = {
  color: "red",
  wheels: 4,
  engine: {
    cylinders: 6,
    size: 3.6,
    toString: function () {
      return this.color;
    },
  },
};
const jsonCar = JSON.stringify(car);
console.log(jsonCar); // {"color":"red","wheels":4,"engine":{"cylinders":6,"size":3.6}}
1
2
3
4
5
6
7
8
9
10
11
12
13

# Conversie van JSON String to JavaScript

We gebruiken de JSON.parse()-methode om een JSON-geformatteerde string om te zetten naar een JavaScript-object. Het neemt een JSON-string als argument en geeft het overeenkomstige JavaScript-object terug.

const jsonString = '{"name":"Alice","age":25,"city":"London"}';
const person = JSON.parse(jsonString);
console.log(person);
// Output: { name: 'Alice', age: 25, city: 'London' }
1
2
3
4
jsonStr = `[
  {
    "name": "Bulbasaur",
    "geoLocation": {
      "lat": 51.055321,
      "lng": 3.740906
    },
    "type": [
      "grass",
      "poison"
    ],
    "total": 318
  },
  {
    "name": "Ivysaur",
    "geoLocation": {
      "lat": 51.255471,
      "lng": 3.840905
    },
    "type": [
      "grass",
      "poison"
    ],
    "total": 405
  }
]`;
obj = JSON.parse(jsonStr);
console.log(obj);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

Resultaat:

[
  {
    name: 'Bulbasaur',
    geoLocation: { lat: 51.055321, lng: 3.740906 },
    type: [ 'grass', 'poison' ],
    total: 318
  },
  {
    name: 'Ivysaur',
    geoLocation: { lat: 51.255471, lng: 3.840905 },
    type: [ 'grass', 'poison' ],
    total: 405
  }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Validatie

Om JSON te valideren kunnen we dit realiseren o.a. via online services, zoals:

JSONLint

# Extra

Naast het gebruik van deze online services kunnen we natuurlijk JSON nakijken of deze goed opgebouwd is via JavaScript.

function IsJSONStringWellformed(strJSON) {
  try {
    var o = JSON.parse(strJSON);
    if (o && typeof o === "object" && o !== null) {
      return true;
    }
    return false;
  } catch (e) {}
  return false;
}

var jsonString = '{"firstName":John","lastName":"De Pauw"}';
console.log(IsJSONStringWellformed(jsonString));
1
2
3
4
5
6
7
8
9
10
11
12
13

Via de statische methode parse(bepaalde string) uit de klasse JSON kunnen we een JSON-string converteren naar een JSON-object. De bovenstaande code geeft in het console-venster de waarde false, omdat de waarde John" een dubbele aanhalingsteken " ontbreekt. De juiste waarde moet dus zijn: "John".

De code van hierboven kunnen we nog korter schrijven door gebruik te maken van een reguliere expressie. We kunnen ook de globale functie eval(bepaalde string) als alternatief voor JSON.parse(bepaalde string), bij voorkeur de laatste methode gebruiken.

function IsJSONStringWellformed(strJSON) {
  var isSyntaxOk = !/[^,:{}\[\]0-9.\-+Eaeflnr-u \n\r\t]/.test(
    strJSON.replace(/"(\\.|[^"\\])*"/g, "")
  );
  if (isSyntaxOk) {
    var o = JSON.parse(strJSON);
    if (o && typeof o === "object" && o !== null) {
      return true;
    }
  }
  return false;
}

var jsonString = '{"firstName":John","lastName":"De Pauw"}';
console.log(IsJSONStringWellformed(jsonString));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Om JSON effectief te valideren moeten we gebruik maken van JSON Schema. Een JSON Schema beschrijft een bepaald JSON dataformaat gebaseerd op jouw specifieke data. JSON Schema is op zichzelf ook JSON en kan een complete structurele validatie voorzien.

JSON Schema: Valideer met dit schema of je data correct is ingevuld.

{
  "type": "object",
  "$schema": "http://json-schema.org/draft-03/schema",
  "id": "http://jsonschema.net",
  "required": false,
  "properties": {
    "addresses": {
      "type": "array",
      "id": "http://jsonschema.net/addresses",
      "required": false,
      "items": {
        "type": "object",
        "id": "http://jsonschema.net/addresses/0",
        "required": false,
        "properties": {
          "city": {
            "type": "string",
            "id": "http://jsonschema.net/addresses/0/city",
            "required": true
          },
          "country": {
            "type": "string",
            "id": "http://jsonschema.net/addresses/0/country",
            "required": true
          },
          "postalCode": {
            "type": "string",
            "id": "http://jsonschema.net/addresses/0/postalCode",
            "required": false
          },
          "street": {
            "type": "string",
            "id": "http://jsonschema.net/addresses/0/street",
            "required": true
          },
          "type": {
            "type": "string",
            "id": "http://jsonschema.net/addresses/0/type",
            "required": false
          }
        }
      }
    },
    "firstName": {
      "type": "string",
      "id": "http://jsonschema.net/firstName",
      "required": true
    },
    "height": {
      "type": "number",
      "id": "http://jsonschema.net/height",
      "required": true
    },
    "isFemale": {
      "type": "boolean",
      "id": "http://jsonschema.net/isFemale",
      "required": true
    },
    "lastName": {
      "type": "string",
      "id": "http://jsonschema.net/lastName",
      "required": false
    },
    "weight": {
      "type": "number",
      "id": "http://jsonschema.net/weight",
      "required": false
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
Introductie Fetch
© 2025 Arteveldehogeschool Laatst bijgewerkt: 13/1/2025, 10:02:14