zengin-codeで銀行名・支店名を自動で取得

はじめに

こんばんは。

今回も作業でやった簡単な備忘録です。

以下のライブラリで銀行コード・支店コードから 銀行名支店名を自動で取得するようなことをしました。

github.com

本題

html

<div>
    <div>
        <p>銀行コード</p>
        <input type="text" name="bank_code">
    </div>
    <div>
        <p>銀行名</p>
        <input type="text" name="bank_name" readonly>
    </div>
    <div>
        <p>支店コード</p>
        <input type="text" name="branch_code">
    </div>
    <div>
        <p>支店名</p>
        <input type="text" name="branch_name" readonly>
    </div>
</div>

js

import $ from 'jquery';
const zenginCode = require('zengin-code');

$(function() {
  // 銀行コードの入力イベント
  $("input[name='bank_code']").on('input', function() {
    $("input[name='bank_name']").val('');
    const bankCode = $(this).val();

    if (zenginCode[bankCode] !== undefined) {
      // 銀行データがあれば銀行名をセットする
      $("input[name='bank_name']").val(zenginCode[bankCode]['name']);
      $("input[name='branch_code']").val('');
      $("input[name='branch_name']").val('');
    }
  });

  // 支店コードの入力イベント
  $("input[name='branch_code']").on('input', function() {
    $("input[name='branch_name']").val('');
    const bankCode = $("input[name='bank_code']").val();
    const branchCode = $(this).val();

    if (zenginCode[bankCode] !== undefined && zenginCode[bankCode]['branches'][branchCode] !== undefined) {
      // 支店データがあれば支店名をセットする
      $("input[name='branch_name']").val(zenginCode[bankCode]['branches'][branchCode]['name']);
    }
  });
})

この感じで、銀行コード・支店コードを入力すると、銀行名・支店名が自動で表示されるようになります。

ただ、このライブラリの欠点としては、信用金庫などは信金などに略されているので、そのあたり正確に欲しい場合は泥臭いコードを書く必要があります。

おわりに

今週死ぬほど忙しくて、雑なブログになってしまいました。。。