CouchDB テーブルデータを表示/更新

さて単純なデータの表示/更新はできました。続いてテーブルデータです。例としては高度による静圧を取り上げます。とりあえず、出来た結果の表示例を以下に示します。（注：うっかり例には「標準大気圧テーブル」と書いてしまいましたが、正確には標準大気圧を元にした静圧のテーブルです。後で気づきました。(^_^;)）

これの元になったCouchDBのドキュメントは以下です。

{ "_id": "StaticPressure", 
 "_rev": "16-482692fb61559cf3ad7224021b093d63", 
 "name": "StaticPressure", 
 "value": { "StaticPressure": [ { "Alt": 0, "P": 10332 }, { "Alt": 1, "P": 9167 }, { "Alt": 2, "P": 8106 } ] }, 
 "unit": "Alt[km],P[kgf/m2]" }

取り扱いたいデータは、"value"項にあるObjectのArrayです。（後にデータの追加を説明しますが、最初はこれもjson形式だと勘違いしていましたが、正確には違うんですね。そのためjsonのデータハンドリングが使えず、JavaScriptのObjectのデータとして取り扱います。つまりObjectのArrayがjsonの一つのデータとして格納されている形になっています）

「読込」ボタンで動くJacaScriptを以下に示します。



   var url = 'http://localhost:5984/environment/StaticPressure';
   var json;
   var json_part; // 静圧テーブルデータ部分（正確に言うと狭義のJSONとは違う）


   function exec() {
    // データの読み込み
    $.ajax({
     type: "GET",
     url: url,
     dataType:'json',
    }).done(function(data) {
     json = data;
     json_part = data.value;

     for (var i=0; i<json_part.StaticPressure.length; i++) {
      // 表（table）の最後の行に追加
      $('#table1 > tbody:last').append('<tr><td>'+ json_part.StaticPressure[i].Alt +'</td><td>'+ json_part.StaticPressure[i].P +'</td></tr>');     
     }

    }).fail(function(xhr, textStatus, errorThrown){
     alert('error!!');
     console.log("NG:" + xhr.status);
     console.log("NG:" + textStatus.status);
     $('#msg').append("失敗しました");
    });

   }

#table1というidのtableタグがhtml側に用意してあり、そこに読み込んだ静圧テーブルのデータを１行づつ追加していくだけです。

次に「追加」を実装します。最初の例に既に「読込」の右横に２個の入力フィールドとともに準備してあります。ここに、「0.5」「1000」という 値を入れて「追加」してみます。

無事データが一行追加されました。「追加」ボタンの実装を以下に示します。

function add() {
 var newAlt = parseFloat( $('#inputAlt').val() );
 var newPressure = parseFloat( $('#inputPressure').val() );

 // 入力データを追加する（単純に検索する）
 for (var i=0; i<json_part.StaticPressure.length; i++) {

  if (json_part.StaticPressure[i].Alt <= newAlt) {
   continue;
  }

  var newdata = {};
  newdata.Alt = newAlt;
  newdata.P = newPressure;

  // 表（table）のi行に追加
  $('#table1 tr').eq(i).after('<tr><td>'+ newdata.Alt +'</td><td>'+ newdata.P +'</td></tr>');

  // 静圧テーブルデータにも追加
  // 第１引数：変更を加えるindex
  // 第２引数：第１引数から難行のObjectを削除するか指定
  // 第３引数：変更として追懐したいObject
  json_part.StaticPressure.splice(i, 0, newdata);

  break;    
}

今回は注意点が２箇所あります。
①17行目でtableに値を追加しています。前回はappend( )を使いましたが、今回はafter( )を使いました。理由がわかりませんが、append( )だとテーブルの形が崩れたからです。（右横に１列追加される感じになってしまいました）この辺はもう少し勉強が必要です。
②23行目で実際のメモリ中のデータにも挿入しています。最初にも書きましたが、てっきりこれがjson形式のデータと思い込んでいたので、pushやなんか使おうとしたんですが、エラーばかり返されてきました。JavaScriptのObjectというデータ形式の中で、特にハンドリングしやすいようにフォーマットを決められたのがjsonとのことで、JavaScript内部のメモリでの持ち方はどちらも同じですが、使う関数が違います。splice( )と呼ばれるArrayに対する操作を行う関数を使っています。

ところで最初に「読込」時、テーブルデーを扱いやすくするため、json内部のvalueの部分だけjson_partという変数に代入してました。これまさしくポインタの代入で、「追加」の方でjsn_partにデータを追加したら、しっかしjsonの方にも反映されていました。（この辺りはjavaと同じで、変数は基本ポインタで値を保持しているようです）
後はこの新しいデータをCouchDBに戻してやるのと、せっかくテーブルデータなのでグラフが欲しいところですが、それはまた次回に。