②患者基本情報データの取得6

前回に引き続き、WebAPIを使って、ＯＲＣＡから患者基本情報をとってこれるよう、プログラミングを行っていく。その際、認証情報をヘッダに書く必要がある。

まず、ＵＲＬからデータを取得するためのサービスを作る。その名前を'Patient'にした。
すると、次のようなプログラムになる。
ＪＳ

.service('Patient', ['$http', function($http) {
  this.get = function() {
    $http.defaults.headers.get = {
      'Authorization' : 'Basic ' + window.btoa(g_user + ':' + g_passwd)
    };
    return $http.get('http://172.16.108.251:8000/api01rv2/patientgetv2?id=00001&format=json')
      .then(
        function(response) {  
          return response.data.patientinfores.Patient_Information;
        },
        function(response) {  
          alert('Error at Patient:' + JSON.stringify(response.data, null, 2));
        }
      );
  };
}])

図1．サービス 'Patient'

g_userとg_passwdは自分の認証情報を代入して、教えてやらなければならないので、index.jsの１番最初に次のようなプログラムをうつ。
ＪＳ

g_user = 'ormaster';
g_passwd = '[ormasterのパスワード]';

図2．ORCAのユーザ名とパスワードの設定

次はモデルとビューの架け橋となるコントローラを作る。その名前を'PatientController'にした。すると、次のようなプログラムになる。
ＪＳ

.controller('PatientController', ['$scope', 'Patient', function($scope, Patient) {
  var that = this;
 
  /* 患者情報の読み込み */
  Patient.get()
    .then(
      function(patient){
        that.Patient_ID = patient.Patient_ID;
        that.WholeName = patient.WholeName;
        that.BirthDate = patient.BirthDate;
        that.Sex = patient.Sex == '1' ? 'M' : 'F';
      }  
    );
}])

図3．コントローラ 'PatientController'

作成したPatientサービスをコントローラに注入して（1行目）、そのget()メソッドを使って患者情報を取得する（5行目）。取得した患者情報（患者ID、氏名、生年月日、性別）をコントローラのプロパティに設定し、ビュー（demographics.html）から参照できるようにした。なお、11行目は男性（patient.Sexが'1'）なら'M'、女性（patient.Sexが'1'以外）なら'F'をthat.Sexに設定するコードである。
ビューではコントローラを経由して患者情報を出力する。

そして、図１と図3のプログラムを.serviceは.serviceが続いているところ、.controllerは.controllerが続いている、適切なところに挿入する。

こうしてモデル（Service）とコントローラを作成したわけであるが、ビュー（HTML）を作成しないとコントローラは動かないようである。そこで、ビュー（demographics.html）を次の図4のようにプログラミングして、患者基本情報を取得するようにする。
ＨＴＭＬ

図４：demographics.htmlに書くプログラム

1行目でPatientControllerをpatientという変数名で参照して、9行目で患者IDをpatient.Patient_IDで、13行目で患者名をpatient.WholeNameを使って出力している。

すると、図5のように、患者基本情報が取得された。

図5：患者基本情報が取得された基本情報の画面

alert('Success:' + JSON.stringify(response.data.patientinfores,null,2));と打って、うまく、すべての患者基本情報が取得されているのか見てみる。
すると、図6のようにうまく、すべての患者基本情報が取得されていることが分かった。

図6：alertした時の画面

AngularJSではデータを格納するモデルをサービスで、ビューをHTMLで、そして両者の橋渡しをコントローラを使って行っているのである。

次は、患者ＩＤ、氏名以外の項目も表示させられるよう、プログラムを修正していく。また、ＯＲＣＡの患者データもそれらしい値を入力していく。