WebサイトにJSONを読み込んで、その値の分だけカード型UIを表示させる方法[JavaScript, JSON]

WebサイトにJSONをJavaScriptで読み込んで、その値の分だけカード型UIを表示させる方法[JavaScript, JSON]

Webサイトに、外部JSONを読み込む基本的な方法

以前、

「静的なページにJSONファイルを素のJavaScriptで読み込んで、その内容を forEach() や map() でループとして展開する」

という様な案件に携わったことがあり、けっこう覚えておくと役立ちそうな方法だったので、本日はそれについての記事を書きます。

コードなど。まずはサンプルのJSON

まずは、サンプルのJSONです。
これを外部ファイル rabbits.json として保存してあるとします。
かわいいうさぎのプロフィールが7匹分、入っているデータです。

{
  "rabbits": [
    {
      "type": "ネザーランドドワーフ",
      "name": "マカロン",
      "favorite": "ニンジン",
      "age": 1
    },
    {
      "type": "ホーランドロップ",
      "name": "プリン",
      "favorite": "バナナ",
      "age": 3
    },
    {
      "type": "ライオンヘッド",
      "name": "ショコラ",
      "favorite": "キャベツ",
      "age": 2
    },
    {
      "type": "フレンチロップ",
      "name": "キャンディ",
      "favorite": "ブロッコリー",
      "age": 3
    },
    {
      "type": "ドワーフホト",
      "name": "マシュマロ",
      "favorite": "イチゴ",
      "age": 1
    },
    {
      "type": "ジャージーウーリー",
      "name": "ラテ",
      "favorite": "パセリ",
      "age": 3
    },
    {
      "type": "アメリカンファジーロップ",
      "name": "カプチーノ",
      "favorite": "トウモロコシ",
      "age": 2
    }
  ]
}

続いてhtml

htmlは、ただ表示するだけなら、ターゲットとなるdivタグを1個置いておけば良いです。
JavaScriptで動的にhtml要素を生成して、そこにJSONの値を入れて、
このdiv要素に後で差し込むわけです。

<div class="card-container"></div>

JavaScriptでJSONを読み込み、html要素を生成、そこにJSONの値を入れます

これが今回の記事の主要な部分になります。

まず最初の関数 getJSON() で外部JSONファイルを読み込みます。

読み込めたら、先ほど上のセクションで書いたdivタグの中に、要素の分だけ
カードとして情報を表示してあげたいので、
それ用の関数 createCard() も用意しておきます。

getJSON()末尾で、読み込んだJSONを
カード生成用の関数 createCard() に値として渡してあげることで、
カード生成用の関数 createCard() の中でJSONが持つ各値を参照することができます。

<script>
// 外部JSONを読込
async function getJSON() {
  const targetJSON = await fetch("./json/rabbits.json");
  const resultJSON = await targetJSON.json();
  createCard(resultJSON);
}

// カード生成用
function createCard(j) {
  const rabbitsArray = j.rabbits;
  const cardContainer = document.getElementById("card-container");

  rabbitsArray.forEach((d) => {
    const myCard = document.createElement("div");
    const myCardTitle = document.createElement("h3");
    const myCardType = document.createElement("p");
    const myCardFood = document.createElement("p");
    const myCardAge = document.createElement("p");

    myCard.classList.add("card-item");

    myCardTitle.textContent = d.name;
    myCardType.textContent = `うさぎの種類: ${d.type}`;
    myCardFood.textContent = `好きな食べ物: ${d.favorite}`;
    myCardAge.textContent = `年齢: ${d.age}`;

    myCard.appendChild(myCardTitle);
    myCard.appendChild(myCardType);
    myCard.appendChild(myCardFood);
    myCard.appendChild(myCardAge);

    // 対象のhtmlに、生成した要素を appendChild() で差し込む
    cardContainer.appendChild(myCard);
  });
}

// ページがロードされたらJSON取得の関数を呼出す事で動作させる
window.onload = getJSON();
</script>

続いてcss。これはお好みで

続いて、cssになります。
タイトルの通り、 cssに関しては本当にお好みで、自由です。

サンプルとして、1000pxのコンテナ内に
1行に3枚ずつ、うさちゃんの情報が載っているカードが出る様な見た目にしました。

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 2rem auto;
  width: 1000px;
}
.card-item {
  border-radius: 5px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  padding: 10px;
  text-align: center;
  width: calc((100% - 20px) / 3);
}
.card-item h3 {
  font-size: 1.25rem;
}
.card-item p {
  font-size: 0.75rem;
}