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

More than 1 year has passed since last update.


はじめに

こんにちは。

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関数を使っているので、追加や更新されたデータは常に配列の末尾に入っていく。なんとなく気持ち悪い。

  • 一つのデータ(オブジェクト)を抽出するために全データを検索しているので、データ件数が増えたり各データが大きくなったりした場合処理が重くなりそう。。