測試你的技能：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() 函式內部，而不是指令碼的末尾？這與非同步程式碼有關。

嘗試更新下面的即時程式碼以重新建立完成的示例

下載此任務的起點，以便在您自己的編輯器或線上編輯器中工作。