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の記述をテンプレート化することができました。

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