元Webデザイナー兼コーダーの備忘録

HTML,CSSの入門記事やブログのカスタマイズについてアウトプットしています。

 メニュー

Ajaxで外部データを取得し、テンプレートに読み込む

以前の記事(Ajaxで外部データを取得する)で、Ajaxを利用して外部データを取得するコードをご紹介しました。このコードでは、JavaScriptのコードの中にHTMLのコードが含まれていました。今回は、JavaScriptからHTMLを分離する例を書きます。

以前のコード:XML(RSS)の取得

ex.)当ブログのRSSの取得

取得先:https://shiroyuki2020.hatenablog.com/rss

以前ご紹介したコードは、以下です。

<div id="result"></div>
$(function(){
  const url = "RSSを配信しているURL";

  $.ajax({
    type: "GET",
    url: url,
    dataType: "xml",
    // 取得に成功したときの処理
    success:function(data){
      $("item", data).each(function(
        // データ取得
        const title = $("title", this).text();
        const link = $("link", this).text();
        const description = $("description", this).text();
        const pubDate = $("pubDate", this).text();
        const category = $("category", this).text();

        // ブラウザ表示
        $("#result").append(`
          <ul>
            <li><a href="${link}">${title}</a></li>
            <li>${pubDate}</li>
            <li>${category}</li>
          </ul>
        `);
      });
    },
    // 完了したときの処理
    complete:function(){
      console.log("通信が完了しました。");
    },
    // 失敗したときの処理
    error:function(){
      console.log("通信に失敗しました。");
    }
  });
});

表示結果は、以下です。

上記のJavaScriptのコードからHTMLを分離します。

HTMLの分離とテンプレート

mustache.jsを利用して、JavaScriptからHTMLを分離します。 そして、HTMLをテンプレート化します。

<div id="result"></div>

<!-- テンプレート -->
<template id="template">
  <ul>
    <li><a href="{{link}}">{{title}}</a></li>
    <li>公開日:{{pubDate}}</li>
    <li>カテゴリ:{{category}}</li>
  </ul>
</template>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- mustache.jsの読み込み -->
<script src="https://unpkg.com/mustache@latest"></script>
$(function(){
  const url = "https://shiroyuki2020.hatenablog.com/rss";
  const $template = $('#template').html();
  const $result = $("#result");

  $.ajax({
    type: "GET",
    url: url,
    dataType: "xml",
    // 取得に成功したとき
    success:function(data){
      // console.log(data);
      $("item", data).each(function(){
        //データ取得
        const item = {
          title: $("title", this).text(),
          link: $("link", this).text(),
          pubDate: $("pubDate", this).text(),
          category: $("category", this).text(),
        }
        // ブラウザ表示
        $result.append(Mustache.render($template, item));
      });
    },
    // 完了したとき
    complete:function(){
      console.log("通信が完了しました。");
    },
    // 失敗したとき
    error:function(){
      console.log("通信に失敗しました。");
    }
  });

});

JavaScriptからHTMLのコードを切り出しました。 そして、HTML側でテンプレートの記述を追加しています。

まとめ

mustache.jsを利用することで、HTMLの記述をテンプレート化することができました。

この先の目標としては、ポストしたデータをサーバ側に保存したいです。そのためには、サーバ側の処理を作らないと実現できなさそうです。今後は、サーバ側も勉強していきたいです。