JavaScriptでは、よくJSON形式のデータを活用するケースがあります。AJAXを使ってサーバ側からレスポンスする際や、外部連携する等によく使っています。慣れてくると大変便利なので、多用してしまいがちですが、なんでもかんでもJSON形式とすると、自由度が高い分、視覚的にソースがわかりにくくなりますし、中の要素を変更する際に、その他の要素に思わぬ影響を与える事があります。特によく障害となるケースが、配列と単純なオブジェクトの差です。配列形式ではないJSONに配列のJSONをpushしてしまって、後から正しく取得できない。といった事が経験としてたまにあります。

基本的な使い方を掲載します。

• JSON形式の定義

構成はKEY:VALUEとなり、オブジェクトの場合は{}で囲い、配列の場合は[]で囲います。

// １レコード（配列でない）場合
var data1 = {cd : 100,name : "test1"};

// 配列形式の複数レコードの場合
var data2 = [
  { cd : 100, name : "test1"},
  { cd : 101, name : "test2"},
  { cd : 102, name : "test3"}
];

// KEY形式の場合
var data3 = {
    100: {
        cd: '100',
        name: 'test1'
    },
    200: {
        cd: '101',
        name: 'test2'
    },
    300: {
        cd: '102',
        name: 'test2'
    }
};

// 内容を確認

// 要素取得
console.log(data1.cd+","+data1.name);

// 配列の件数分、取得
for (var i = 0; i < data2.length; i++) {
    console.log(data2[i].cd+","+data2[i].name);
}

// KEYの取得
for (var keyData in data3) {
    console.log(keyData);
}

// 該当KEYの要素取得
for (var keyData in data3) {
    console.log(data3[keyData]);
}

• JSONオブジェクトの追加

JSONの配列型オブジェクトに、配列要素を追加したい場合は、以下のようにpushを使います。

var putData = { cd : 103, name : "test3" };

data2.push(putData);

• JSONオブジェクトの抽出

JSONの配列型オブジェクトより、対象のKEYに該当する配列データを抽出したい場合がよくあります。この場合は、filterを使って、その中で該当するデータのみを返すようにしています。

// cdが100または101のJSONデータを取得
var getList = data2.filter(function(itemData, index){
  if (itemData.cd == 100 || itemData.cd == 101) return true;
});

// 対象のJSONデータ配列の要素を出力
for (var i = 0; i < getList.length; i++) {
    console.log(getList[i].cd+","+getList[i].name);
}

• JSON配列の並び替え（ソート）

JSONの配列型オブジェクトの場合、よく並び替えが必要となるケースがあります。この場合は、JavaScriptは、配列にsort機能があるので、それを使っています。sort関数は、引数で比較する為のfunctionを指定できますので、これで並び替えの対象となるKEY項目の判定を指定します。

// 並び替え条件比較処理(cd昇順)
function comp(item1,item2){
    var rtn = 0;
    if(item1.cd < item2.cd ) {
        rtn = -1;
    }
    else if(item1.cd > item2.cd) {
        rtn = 1;
    }
    return rtn;
}

// 対象のJSON配列オブジェクトのsotr機能で並び替え
data2.sort(comp);

// 並び替え後の配列の値を取得
for (var i = 0; i < data2.length; i++) {
    console.log(data2[i].cd+","+data2[i].name);
}

※上記のsortで、その他の言語をしていると、私は違和感があるのですが、左辺の並び替え後の配列がありません。つまりdata2 = data.sort();とする必要がありません。これはsort関数が、指定された配列そのものを並び替える事にあります。