スキルテスト: JSON
このスキルテストの目的は、JSON の操作の記事を理解できたかどうかを評価することです。
メモ: 下記のインタラクティブエディターで解答を試すことができますが、コードをダウンロードして、CodePen, jsFiddle, Glitch などのオンラインツールを使用して作業すると便利です。
もし行き詰まった場合は、このページの下にある「評価またはさらなる支援」(#評価またはさらなる支援)の節を参照して、私たちに支援を要求してください。
メモ: 下記の例では、コードにエラーがある場合、ページ上の結果パネルに出力されるので、答え合わせをするのに役立ちます(ダウンロードした場合には、ブラウザーの JavaScript コンソールに出力されます)。
JSON 1
この記事の唯一の課題は、JSON データにアクセスして、それをページ内で使用することに関するものです。いくつかの母猫とその子猫に関する JSON データが sample.json で提供されています。JSON は文字列としてページに読み込まれ、displayCatInfo()
関数の catString
引数で利用できるようになります。課題は、displayCatInfo()
関数の欠落部分を埋めて格納することです。
- 母猫 3 匹の名前をカンマで区切って
motherInfo
という変数に入れてください。 kittenInfo
変数には、子猫の総数、およびオスとメスの数を格納してください。
そして、これらの変数の値が、段落の中で画面に表示されるようにします。
ヒントや質問をいくつか示します。
- JSON データは
displayCatInfo()
関数の中でテキストとして提供されます。JSON から何かデータを取得する前に、JSON を解釈する必要があります。 - 外側のループを使用して猫をループ処理して、その名前を
motherInfo
変数文字列に追加し、内側のループを使用してすべての子猫をループ処理して、すべての子猫/オス/メスの合計を加算し、その詳細をkittenInfo
変数の文字列に追加するとよいでしょう。 - 最後の母猫の名前の前に "and" を、その後にピリオドを置く必要があります。どうすれば、JSON に何匹の猫がいても、このような動作をさせることができるでしょうか。
- なぜ
para1.textContent = motherInfo;
とpara2.textContent = kittenInfo;
の行はdisplayCatInfo()
関数の中にあり、スクリプトの終わりにはないのでしょうか。これは、非同期コードと関係があります。
下記のライブコードを更新して、完成例を再現してみてください。
自分自身でエディターやオンラインエディターで作業する場合は、この作業の開始時点のものをダウンロードしましょう。
評価とさらなる支援
これらの例は、上記のインタラクティブエディターで練習することができます。
自分の作品を評価してほしい、行き詰っているので相談したい方は、次のようにしましょう。
-
MDN Discourse フォーラムの Learning カテゴリーに、評価や支援を求める投稿を(英語で)書き込んでください。投稿には次のことを書いてください。
- "Assessment wanted for JSON skill test" のような、説明的なタイトル。
- すでに試したことの詳細と、私たちに何をしてほしいか(例: 行き詰まり、助けが必要な場合、または評価が必要な場合)。
- コード。
- 実際の課題または評価ページへのリンクにより、助けを求めている問題を見つけることができます。