• Zurück
• Übersicht: Dynamische Skripterstellung mit JavaScript
• Weiter

Das Ziel dieses Fähigkeitstests ist es, zu überprüfen, ob Sie unseren ArtikelArbeiten mit JSON verstanden haben.

JSON 1

Die einzige Aufgabe in diesem Artikel betrifft den Zugriff auf JSON-Daten und deren Verwendung auf Ihrer Seite. JSON-Daten über einige Katzenmütter und ihre Kätzchen sind insample.json verfügbar. Das JSON wird als Textzeichenfolge in die Seite geladen und imcatString Parameter derdisplayCatInfo() Funktion verfügbar gemacht.

Um die Aufgabe abzuschließen, füllen Sie die fehlenden Teile derdisplayCatInfo() Funktion aus, um Folgendes zu speichern:

• Die Namen der drei Katzenmütter, durch Kommas getrennt, in der VariablenmotherInfo.
• Die Gesamtzahl der Kätzchen und wie viele davon männlich und weiblich sind, in der VariablenkittenInfo.

Die Werte dieser Variablen werden dann innerhalb von Absätzen auf dem Bildschirm ausgegeben.

Einige Hinweise/Fragen:

• Die JSON-Daten werden als Text innerhalb derdisplayCatInfo() Funktion bereitgestellt. Sie müssen sie in JSON parsen, bevor Sie irgendwelche Daten daraus extrahieren können.
• Sie werden wahrscheinlich eine äußere Schleife verwenden wollen, um durch die Katzen zu schleifen und ihre Namen der ZeichenfolgenvariablemotherInfo hinzuzufügen, und eine innere Schleife, um durch alle Kätzchen zu schleifen, die Gesamtzahl aller/männlichen/weiblichen Kätzchen zu addieren und diese Details der ZeichenfolgenvariablekittenInfo hinzuzufügen.
• Der letzte Katzenmütter-Name sollte ein "und" davor haben und ein Punkt danach. Wie stellen Sie sicher, dass dies funktioniert, egal wie viele Katzen im JSON sind?
• Warum befinden sich die Zeilenpara1.textContent = motherInfo; undpara2.textContent = kittenInfo; innerhalb derdisplayCatInfo() Funktion und nicht am Ende des Skripts? Dies hat etwas mit asynchronem Code zu tun.

Der Ausgangspunkt der Aufgabe sieht so aus:

Hier ist der zugrunde liegende Code für diesen Ausgangspunkt:

<p></p><p></p>

p {  color: purple;  margin: 0.5em 0;}* {  box-sizing: border-box;}

const para1 = document.querySelector(".one");const para2 = document.querySelector(".two");let motherInfo = "The mother cats are called ";let kittenInfo;const requestURL =  "https://mdn.github.io/learning-area/javascript/oojs/tasks/json/sample.json";fetch(requestURL)  .then((response) => response.text())  .then((text) => displayCatInfo(text));// Don't edit the code above here!function displayCatInfo(catString) {  let total = 0;  let male = 0;  // Add your code here  // Don't edit the code below here!  para1.textContent = motherInfo;  para2.textContent = kittenInfo;}

Die aktualisierte Ausgabe sollte wie folgt aussehen:

// ...// Don't edit the code above here!function displayCatInfo(catString) {  let total = 0;  let male = 0;  const cats = JSON.parse(catString);  for (let i = 0; i < cats.length; i++) {    for (const kitten of cats[i].kittens) {      total++;      if (kitten.gender === "m") {        male++;      }    }    if (i < cats.length - 1) {      motherInfo += `${cats[i].name}, `;    } else {      motherInfo += `and ${cats[i].name}.`;    }  }  kittenInfo = `There are ${total} kittens in total, ${male} males and ${    total - male  } females.`;  // Don't edit the code below here!  para1.textContent = motherInfo;  para2.textContent = kittenInfo;}

const para1 = document.querySelector(".one");const para2 = document.querySelector(".two");let motherInfo = "The mother cats are called ";let kittenInfo;const requestURL =  "https://mdn.github.io/learning-area/javascript/oojs/tasks/json/sample.json";fetch(requestURL)  .then((response) => response.text())  .then((text) => displayCatInfo(text));function displayCatInfo(catString) {  let total = 0;  let male = 0;  const cats = JSON.parse(catString);  for (let i = 0; i < cats.length; i++) {    for (const kitten of cats[i].kittens) {      total++;      if (kitten.gender === "m") {        male++;      }    }    if (i < cats.length - 1) {      motherInfo += `${cats[i].name}, `;    } else {      motherInfo += `and ${cats[i].name}.`;    }  }  kittenInfo = `There are ${total} kittens in total, ${male} males and ${    total - male  } females.`;  para1.textContent = motherInfo;  para2.textContent = kittenInfo;}

• Zurück
• Übersicht: Dynamische Skripterstellung mit JavaScript
• Weiter