测试你的技能：JSON

此技能测试的目的是评估您是否理解了我们的 使用 JSON 文章。

注意：您可以通过下载代码并将其放入在线编辑器（例如 CodePen、JSFiddle 或 Glitch）来尝试解决方案。如果有错误，它将在页面上的结果面板或浏览器的 JavaScript 控制台中记录，以帮助您。

如果您遇到困难，您可以在我们的 交流渠道 中联系我们。

JSON 1

本文中唯一的一项任务涉及访问 JSON 数据并在您的页面中使用它。关于一些母猫及其幼崽的 JSON 数据可在 sample.json 中获得。该 JSON 作为文本字符串加载到页面中，并在 displayCatInfo() 函数的 catString 参数中提供。您的任务是填写 displayCatInfo() 函数的缺失部分，以存储

  • 三个母猫的名字，用逗号隔开，在 motherInfo 变量中。
  • 幼崽的总数，以及有多少是雄性和雌性，在 kittenInfo 变量中。

这些变量的值随后会打印到屏幕上的段落中。

一些提示/问题

  • JSON 数据作为 displayCatInfo() 函数中的文本提供。您需要将其解析为 JSON，然后才能从中获取任何数据。
  • 您可能希望使用一个外层循环来循环遍历猫并将它们的名字添加到 motherInfo 变量字符串中，以及一个内层循环来循环遍历所有幼崽，将所有/雄性/雌性幼崽的总数加起来，并将这些细节添加到 kittenInfo 变量字符串中。
  • 最后一个母猫的名字前面应该有一个“and”，后面应该有一个句号。如何确保无论 JSON 中有多少只猫，这都能正常工作？
  • 为什么 para1.textContent = motherInfo; 和 para2.textContent = kittenInfo; 行位于 displayCatInfo() 函数内部，而不是脚本的末尾？这与异步代码有关。

尝试更新下面的实时代码以重新创建完成的示例

下载此任务的起点，以便在您自己的编辑器或在线编辑器中工作。