JSON

• JavaScript Object Notation
• Textformat zur Datenspeicherung und zum Datentransport

XML vs. JSON

• JSON ist viel kürzer und lesbarer
• JSON wird deshalb vorzugsweise genutzt

<employees>
    <employee>
        <firstName>John</firstName>
        <lastName>Doe</lastName>
    </employee>
    <employee>
        <firstName>Anna</firstName>
        <lastName>Smith</lastName>
    </employee>
    <employee>
        <firstName>Peter</firstName>
        <lastName>Jones</lastName>
    </employee>
</employees>

{
  "employees": [
    {
      "firstName": "John",
      "lastName": "Doe"
    },
    {
      "firstName": "Anna",
      "lastName": "Smith"
    },
    {
      "firstName": "Peter",
      "lastName": "Jones"
    }
  ]
}

Syntax

• Key-Value-Paare
• Abtrennung von Paaren durch Kommas
• ganzes JSON-Objekt in geschweiften Klammern
• JSON-Objekte: { ... }
• JSON-Arrays: [ ..., ... ]

Datentypen

{
  "key": "value",
  "text": "Dies ist ein Text!",
  "number": 100,
  "object": {
    "key": "value",
    "someNumber": 123,
    "someOtherObject": {
      "someArray": [
        1,
        2,
        3,
        4
      ],
      "someText": "text"
    }
  },
  "array": [
    "Anna",
    "John"
  ],
  "boolean": true,
  "null": null
}

Beispiel

auf JSON Example

[
  {
    "id": "0001",
    "type": "donut",
    "name": "Cake",
    "ppu": 0.55,
    "batters": {
      "batter": [
        {
          "id": "1001",
          "type": "Regular"
        },
        {
          "id": "1002",
          "type": "Chocolate"
        },
        {
          "id": "1003",
          "type": "Blueberry"
        },
        {
          "id": "1004",
          "type": "Devil's Food"
        }
      ]
    },
    "topping": [
      {
        "id": "5001",
        "type": "None"
      },
      {
        "id": "5002",
        "type": "Glazed"
      },
      {
        "id": "5005",
        "type": "Sugar"
      },
      {
        "id": "5007",
        "type": "Powdered Sugar"
      },
      {
        "id": "5006",
        "type": "Chocolate with Sprinkles"
      },
      {
        "id": "5003",
        "type": "Chocolate"
      },
      {
        "id": "5004",
        "type": "Maple"
      }
    ]
  },
  {
    "id": "0002",
    "type": "donut",
    "name": "Raised",
    "ppu": 0.60,
    "batters": {
      "batter": [
        {
          "id": "1001",
          "type": "Regular"
        }
      ]
    },
    "topping": [
      {
        "id": "5001",
        "type": "None"
      },
      {
        "id": "5002",
        "type": "Glazed"
      },
      {
        "id": "5005",
        "type": "Sugar"
      },
      {
        "id": "5003",
        "type": "Chocolate"
      },
      {
        "id": "5004",
        "type": "Maple"
      }
    ]
  },
  {
    "id": "0003",
    "type": "donut",
    "name": "Old Fashioned",
    "ppu": 0.75,
    "batters": {
      "batter": [
        {
          "id": "1001",
          "type": "Regular"
        },
        {
          "id": "1002",
          "type": "Chocolate"
        }
      ]
    },
    "topping": [
      {
        "id": "5001",
        "type": "None"
      },
      {
        "id": "5002",
        "type": "Glazed"
      },
      {
        "id": "5003",
        "type": "Chocolate"
      },
      {
        "id": "5004",
        "type": "Maple"
      }
    ]
  }
]

Zugriff

Ein Zugriff auf JSON-Werte erfolgt über die Punktnotation.

person = {"name": "John", "age": 30, "city": "New York"};
person.name; // → John
person.age;  // → 30

mitarbeiter = {"employees": ["John", "Anna", "Peter"]};
mitarbeiter.employees[0] // → John
mitarbeiter.employees[1] // → Anna
mitarbeiter.employees[2] // → Peter

Dies ist auch geschachtelt möglich:

backwaren[0].name                           // → "Cake"
backwaren[2].id                             // → "0003"
backwaren[0].batters.batter[0].type         // → "Regular"
backwaren[0].batters.batter[0]['type']      // → "Regular"

Solches JavaScript kann auch im Browser unter Entwicklungstools (F12) > Konsole ausgeführt werden.

JavaScript Funktionen

Normaler Zugriff

console.log("Name der ersten Backware: "
    + backwaren[0].name);

Ausgabe:

Name der ersten Backware: Cake

Erste Instanz finden: find(predicate)

console.log("Typ des ersten Teigs: "
    + backwaren.find((backware) => backware.name === "Cake")
        .batters.batter[0]
        .type);

Ausgabe:

Typ des ersten Teigs: Regular

Array-Elemente verändern: map(callbackFunction)

console.log("Alle Typen der Teige der ersten Backware: "
    + backwaren[0]
        .batters
        .batter
        .map(batter => batter.type)
        .join(", ")
)

Ausgabe:

Alle Typen der Teige der ersten Backware: Regular, Chocolate, Blueberry, Devil's Food

Array-Elemente mit Trennzeichen verbinden: join(separator?: string)

console.log("Namen und ppu's der drei Backwaren: ");
console.log("> " + backwaren.map(backware => backware.name + ": " + backware.ppu).join(" "));

Ausgabe:

Namen und ppu's der drei Backwaren:
> Cake: 0.55 Raised: 0.6 Old Fashioned: 0.75

Zweidimensionales Array zu eindimensionalem Array umwandeln (flatMap(callback)) und Arrays sortieren (

sort(compareFn?)

console.log("Alle Toppings aller Backwaren: ");

// mit flatMap(callback) Backwaren zu topping-Arrays umwandeln und dann zu einem Array zusammenfassen
const toppings = backwaren.flatMap(backware => backware.topping);

// doppelte Werte durch das erstellen einer Map hinausfiltern
// aus Map wieder Array erstellen: Array.from(iterable: Iterable<{id, type}>)
const uniqueToppings = Array.from(
    new Map(toppings.map(item => [item.id, {
        id: item.id,
        type: item.type
    }])).values()
)
// einzigartige Toppings mit sort(compareFn?) sortieren
.sort((a, b) => a.id - b.id);

// Toppings darstellen
console.log(uniqueToppings.map(topping => "> " + topping.id + ": " + topping.type).join("\n"));

Ausgabe:

Alle Toppings aller Backwaren:
> 5001: None
> 5002: Glazed
> 5003: Chocolate
> 5004: Maple
> 5005: Sugar
> 5006: Chocolate with Sprinkles
> 5007: Powdered Sugar