javascriptでJSONデータを扱う(登録・参照・更新・削除)

はじめに

こんにちは。
javascriptでJSONデータをゴニョゴニョする方法を調べていたのですが、いまいちピンとくる資料がなかったので、自分が理解した範囲でまとめてみました。誰かの参考になれば幸いです。
また、こう書いた方が速い/キレイ/正しい等あれば教えて頂けると嬉しいです。よろしくお願いします。

前提

記事によって「オブジェクト型で格納されたJSONデータ」と
「配列型で格納されたJSONデータ」が混在している上に、
それが明記されていないせいで分かりにくいことがありました。
この記事で取り扱うのは、
「__オブジェクトの配列__として格納されたJSONデータ」
です。以下がサンプル。

var data = [
  { name : "taro",
    exam : {
      math : 100,
      lang : 100
    },
    grade : "a"
  },
  { name : "jiro", exam : { math : 50, lang : 50 }, grade : "c" },
  { name : "saburo", exam : { math : 10, lang : 10 }, grade : "d" }
];

データの参照

配列なので添え字([0]とか)を使用できる

console.log(data[0].name); // => taro
console.log(data[0].exam.math); // =>100

jiroのexamのlang、など決め打ちの値が欲しい場合は
filter関数を使用する。まず
key「name」のvalueが「jiro」
という条件にマッチしたものだけを抽出した配列を作り、
その配列の先頭から必要な値を取り出す。

var matchData = data.filter(function(item, index){
  if (item.name == "jiro") return true;
});

console.log(matchData[0].exam.lang); // =>50

データの追加

__オブジェクト__としてデータを作成し、
既存の配列にpush関数で詰める。
(既存のデータは配列の中にオブジェクトとして格納されている。
なので、追加するデータもオブジェクトとして作成し、pushする)

var addData =
  { name : "shiro", exam : { math : 10, lang : 100 }, grade : "b" }

data.push(addData);

データの削除

jiroのデータを削除したい場合。
抽出のときとは逆に、filter関数を使用して
条件に当てはまらない全てのデータを抽出した配列を作成し、
既存の配列と置き換える。

var newData = data.filter(function(item, index){
  if (item.name != "jiro") return true;
});

data = newData;

データの更新

jiroのexamのmathを75に更新したい場合。
まずjiroのデータ(オブジェクト)を抜いた配列newDataを作り、
そこにjiroのデータを更新したchangeDataをpushする。

var newData = data.filter(function(item, index){
  if (item.name != "jiro") return true;
});

var changeData = data.filter(function(item, index){
  if (item.name == "jiro") return true;
});
changeData[0].exam.math = 75;

newData.push(changeArray[0]);
// [注意]
// 最後にchangeArray[0]ではなくchangeArrayでpushすると
// 更新されたデータだけ配列型で入ってしまう。

data = newData;

補足

• 今回はpush関数を使っているので、追加や更新されたデータは常に配列の末尾に入っていく。なんとなく気持ち悪い。
• 一つのデータ(オブジェクト)を抽出するために全データを検索しているので、データ件数が増えたり各データが大きくなったりした場合処理が重くなりそう。。