{
"_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に戻してやるのと、せっかくテーブルデータなのでグラフが欲しいところですが、それはまた次回に。
