JSON für Chart.js

[Simuletsplay]

Hallo Zusammen,

ich bin absoluter Anfänger was JS angeht.
Ich habe mir eine PHP API geschrieben um folgende Daten im JSON Format zu erhalten:

Code:

{
neue_mitglieder: {
2021: {
5: "1",
6: "5",
7: "4",
8: "7",
9: "11",
10: "4",
11: "8",
12: "4"
},
2022: {
1: "3",
2: "3",
3: "5",
4: "5",
5: "8",
6: "1",
7: "8",
8: "4",
9: "13",
10: "9",
11: "11",
12: "1"
},
2023: {
1: "1",
2: "4",
3: "10",
4: "11",
5: "0"
}
},
kuendigungen: {
2021: {
5: "0",
6: "0",
7: "0",
8: "0",
9: "1",
10: "0",
11: "0",
12: "1"
},
2022: {
1: "0",
2: "0",
3: "9",
4: "0",
5: "0",
6: "11",
7: "0",
8: "0",
9: "13",
10: "0",
11: "0",
12: "6"
},
2023: {
1: "0",
2: "0",
3: "17",
4: "0",
5: "0"
}
}
}

Also 3 stufen:
1. Stufe: Neue Mitglieder / Kündigungen
2. Stufe: Jahr
3. Stufe: Monat

Nun zur konkreten frage:
Wie kann ich mithilfe von JS die Daten mir von der URL holen und in das richtige Format packen?
Ich brauche ja nicht nur die Daten, sondern auch die Labels (Beschriftung der x-Achse).

Kann mir dabei jemand helfen?

---

So soll das Resultat dann aussehen.

[rzscout]

Hi Simuletsplay,
du solltest ersteinmal dich mit JavaScript auseinander setzten und lernen. JavaScript ist nicht vergleichbar mit PHP auch wenn es aus der gleichen Sprachfamilie kommt und einen ähnlichen Syntax aufweist.

Zu deiner Frage: Du kannst zum Beispiel Ajax verwenden um asynchron Daten zu senden und/oder zu empfangen. Mithilfe des XMLHttpRequest-Objekt kannst du in JavaScript dann deine Daten holen und und senden.

Ich hab noch ein Beispiel geschrieben:

Code:

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    const data = JSON.parse(this.responseText);
    console.log(data);
  }
};
xhr.open("POST", "https://example.com/deinePHP.php");
xhr.send();

Es gibt auch eine zweite Möglihckeit Daten asynchron via JavaScript zu empfagen und das geht mithilfe von der Fetch-Methode. Hier ein Beispiel:

Code:

fetch('https://example.com/deinePHP.php')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));

Beide Methoden eignen sich um JSON-Daten zu empfangen oder zu senden.

Ich hoffe das hilft dir weiter, wie oben beschreiben ist es auch wichtig zu wissen was man tut in JavaScript und deswegen meine persönliche Empfehlung JavaScript von Grund auf zu lernen.

PS: Wenn du weitere Fragen hast, dann einfach ins Forum schreiben.

Viele Grüße

rzscout