MONACAサンプルアプリの編集2

今回は、グラフの描画部分のプログラミングを行う。具体的には、指定した国、年の人口を取得するPopulationサービスを書き換えて、OpenDolphinから指定した検査項目の検査結果を検査履歴から取得する処理を行う。

.service('Population', ['$http', function($http) {
  this.get = function(country, year) {
    return $http.jsonp('http://api.population.io:80/1.0/population/' + year + '/' + country + '/?format=jsonp&callback=JSON_CALLBACK')
      .then(
        function(response) {
          return response.data;
        }
      );
  };
}])

まず上記のコードを下記のコードに書き換える。

.service('Population', ['$http', function($http) {
  this.get = function(country, year) {
    return $http.get('http://172.16.108.251:8080/dolphin/openSource/lab/module/00001,0,6')
      .then(
        function(response) {
          alert(JSON.stringify(response.data,null,2));
          return response.data;
        }
      );
  };
}])

これは「$http」サービスを使ってOpenDolphinから検査データを取得するサービスPopulationである。また、確認の為6行目に、タップした際に検査データをアラートで表示する処理を加えている。編集を行った後、検査項目をタップすると、前回と同様の画面が表示された。

.service('Population', ['$http', function($http) {
  this.get = function(country, year) {
    return $http.get('http://172.16.108.251:8080/dolphin/openSource/lab/module/00001,0,6')
      .then(
        function(response) {
          //alert(JSON.stringify(response.data,null,2));
          var  laboResults = [];
          response.data.list.forEach(function(list){
            list.items.forEach(function(item){
              if(item.itemName == country){
                laboResults.push(item);
              }
            });
          });
          alert(JSON.stringify(laboResults,null,2));
          return laboResults;
        }
      );
  };
}])

次に、先ほどのコードを上記のコードに書き換える。
まず、7行目で配列変数laboResultsを定義し、その中身を空にする。そして、8行目はlist配列の各々に格納されている1日分の検査データ1つずつに対してループ処理を行っている。9行目は1日分の検査データ items の個々の検査項目1つずつに対してループ処理を行っている。10行目は選択したデータ(名称がcountryに格納されている)と同じ検査名称(itemName)の検査項目を抽出してlaboResults配列に追加するといった処理である。確認の為、スマートフォンアプリの方で検査項目「総ビリルビン」をタップしたところ、総ビリルビンのデータのみを表示させることが出来た。

図1 MONACAアプリ画面