Help us understand the problem. What is going on with this article?

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

More than 3 years have 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関数を使っているので、追加や更新されたデータは常に配列の末尾に入っていく。なんとなく気持ち悪い。
  • 一つのデータ(オブジェクト)を抽出するために全データを検索しているので、データ件数が増えたり各データが大きくなったりした場合処理が重くなりそう。。
1mada
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away