Testen Sie Ihre Fähigkeiten: JSON

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 in sample.json verfügbar. Das JSON wird als Textzeichenfolge in die Seite geladen und im catString Parameter der displayCatInfo() Funktion verfügbar gemacht.

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

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

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

Einige Hinweise/Fragen:

• Die JSON-Daten werden als Text innerhalb der displayCatInfo() 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 Zeichenfolgenvariable motherInfo 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 Zeichenfolgenvariable kittenInfo 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 Zeilen para1.textContent = motherInfo; und para2.textContent = kittenInfo; innerhalb der displayCatInfo() 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 class="one"></p>
<p class="two"></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