Testen Sie Ihre Fähigkeiten: JSON
Ziel dieses Fähigkeitentests ist es zu überprüfen, ob Sie unseren Artikel Arbeiten mit JSON verstanden haben.
Hinweis: Sie können Lösungen ausprobieren, indem Sie den Code herunterladen und in einem Online-Editor wie CodePen, JSFiddle oder Glitch einfügen. Wenn es einen Fehler gibt, wird dieser im Ergebnisbereich der Seite oder in der JavaScript-Konsole des Browsers protokolliert, um Ihnen zu helfen.
Wenn Sie nicht weiterkommen, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
JSON 1
Die einzige Aufgabe in diesem Artikel besteht darin, auf JSON-Daten zuzugreifen und diese auf Ihrer Seite zu verwenden. Die JSON-Daten über einige Mutterkatzen und ihre Kätzchen sind in sample.json verfügbar. Die JSON-Daten werden als Textzeichenfolge in die Seite geladen und im catString
-Parameter der displayCatInfo()
-Funktion bereitgestellt. Ihre Aufgabe ist es, die fehlenden Teile der displayCatInfo()
-Funktion auszufüllen, um zu speichern:
- Die Namen der drei Mutterkatzen, durch Kommata getrennt, in der Variablen
motherInfo
. - Die Gesamtanzahl der Kätzchen und wie viele männlich bzw. weiblich sind, in der Variablen
kittenInfo
.
Die Werte dieser Variablen werden dann innerhalb von Absätzen auf dem Bildschirm angezeigt.
Einige Hinweise/Fragen:
- Die JSON-Daten werden als Text innerhalb der
displayCatInfo()
-Funktion bereitgestellt. Sie müssen diese in JSON parsen, bevor Sie Daten daraus extrahieren können. - Sie möchten wahrscheinlich eine äußere Schleife verwenden, um durch die Katzen zu iterieren und ihre Namen der
motherInfo
-Variablenzeichenfolge hinzuzufügen, und eine innere Schleife, um alle Kätzchen zu durchlaufen, die Gesamtzahl der männlichen/weiblichen Kätzchen zu addieren und diese Details derkittenInfo
-Variablenzeichenfolge hinzuzufügen. - Der letzte Mutterkatzenname sollte ein "und" davor und einen Punkt danach haben. Wie stellen Sie sicher, dass dies funktioniert, unabhängig davon, wie viele Katzen im JSON sind?
- Warum befinden sich die Zeilen
para1.textContent = motherInfo;
undpara2.textContent = kittenInfo;
innerhalb derdisplayCatInfo()
-Funktion und nicht am Ende des Skripts? Dies hat etwas mit asynchronem Code zu tun.
Versuchen Sie den Live-Code unten zu aktualisieren, um das fertige Beispiel nachzubilden:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.