【JavaScript】オブジェクト(連想配列)･JSON の操作を簡単にするJSツール作りました

カテゴリーから探す

年別から見る

2018/02/23

【JavaScript】オブジェクト(連想配列)･JSON の操作を簡単にするJSツール作りました

JSON の API での利用拡大とともに、JavaScript のオブジェクト（連想配列など）を利用する機会が増えてきました。

WEB コンテンツがリッチになっていくのに伴い、扱う情報も多くなっています。
その分、オブジェクトの構造も複雑になり、
操作する手間も多くなってきています。

MongoDB など、JSON に似た形式のデータを多量に扱うドキュメント指向データベースでは、find() などで目的のデータを検索することができ、処理がとても楽です。

これと同じように find() で目的のプロパティや値を検索したり、処理したりしたいと思う機会が最近増えてきたため、WEBブラウザの JavaScript でこれを実装するためのクラスを作ってみました。

AddCtrlToObject

AddCtrlToObject で
オブジェクト（連想配列）・JSON の操作を簡単に
.find() .set() .remove() などでオブジェクトを操作

クラス紹介ページ

ダウンロード

Compressed[7KB]　Uncompressed[20KB]　ECMAScript 6 (ES2015)[16KB]

基本的な使い方

操作したいオブジェクトを引数として AddCtrlToObject のインスタンスを作成します。
インスタンスを通じて、オブジェクトを操作できるようになります。
通常、オブジェクトは参照渡しでインスタンスに渡されるため、インスタンスでの変更はオリジナルのオブジェクトに反映されますが、第二引数に true を指定することで、オリジナルのオブジェクトに影響を与えずに、オブジェクトをクローンして操作できます。

構文


new AddCtrlToObject(obj [, isCloned]);

1	new AddCtrlToObject(obj [, isCloned]);

obj: 操作する対象のオブジェクト。
isCloned: オリジナルのオブジェクトに影響を与えず、クローンして操作する場合は true を指定

記述例


<script src="js/addCtrlToObject.js"></script>

1	<script src="js/addCtrlToObject.js"></script>


var originalObject = {
  "id": 1,
  "names": ["aaa", "bbb", "ccc"],
  "obj": {
    "names": ["ddd", "eee"],
  }
};
var myObject = new AddCtrlToObject(originalObject); // インスタンスの作成
var results = myObject.find('names').get()

var originalObject = {

"id": 1,

"names": ["aaa", "bbb", "ccc"],

"obj": {

"names": ["ddd", "eee"],

}

};

var myObject = new AddCtrlToObject(originalObject); // インスタンスの作成

var results = myObject.find('names').get()

オリジナルのオブジェクトに影響を与えたくない場合は、
AddCtrlToObject のインスタンスを作成するときに、第二引数に true を設定します。

記述例


var myObject = new AddCtrlToObject(originalObject, true); // オブジェクトをクローンしてインスタンスを作成

1	var myObject = new AddCtrlToObject(originalObject, true); // オブジェクトをクローンしてインスタンスを作成

AddCtrlToObject メソッド一覧

get()

オブジェクトの検索結果を取得します。
検索結果の取得は検索直後に限られ、検索前と、get()、set()、remove()、reset() の後はオブジェクト全体を返します

記述例


console.log(myObject.get()); // 検索前
/**
 * {
 *   "id": 1,
 *   "names": ["aaa", "bbb", "ccc"],
 *   ...
 * }
 */

console.log(myObject.find('names').get()); // 検索直後
// または
// myObject.find('names');
// console.log(myObject.get())
/**
 * [
 *   {
 *     "key": "names",
 *     "value": ["aaa", "bbb", "ccc"],
 *     "parent": {"id": 1,"names": ["aaa", "bbb", "ccc"],"obj": {...}}
 *   },
 *   ...
 * ]
 */

console.log(myObject.get()); // get() の直後
/**
 * {
 *   "id": 1,
 *   "names": ["aaa", "bbb", "ccc"],
 *   ...
 * }
 */

console.log(myObject.get()); // 検索前

/**

* {

* "id": 1,

* "names": ["aaa", "bbb", "ccc"],

* ...

* }

console.log(myObject.find('names').get()); // 検索直後

// または

// myObject.find('names');

// console.log(myObject.get())

/**

* [

* {

* "key": "names",

* "value": ["aaa", "bbb", "ccc"],

* "parent": {"id": 1,"names": ["aaa", "bbb", "ccc"],"obj": {...}}

* },

* ...

* ]

console.log(myObject.get()); // get() の直後

/**

* {

* "id": 1,

* "names": ["aaa", "bbb", "ccc"],

* ...

* }

find( key )

オブジェクトから指定したキーを検索して、該当するプロパティの組み {key: キー, value: 値, parent: 親プロパティの参照} からなる配列を返します。
メソッドチェーンにして利用可能です。

記述例


console.log(myObject.find('names').get()); // 'name' の検索と結果の取得
/**
 * [
 *   {
 *     "key": "names",
 *     "value": ["aaa", "bbb", "ccc"],
 *     "parent": {"id": 1,"names": ["aaa", "bbb", "ccc"],"obj": {...}}
 *   },
 *   ...
 * ]
 */

console.log(myObject.find('names').get()); // 'name' の検索と結果の取得

/**

* [

* {

* "key": "names",

* "value": ["aaa", "bbb", "ccc"],

* "parent": {"id": 1,"names": ["aaa", "bbb", "ccc"],"obj": {...}}

* },

* ...

* ]

findByValue( value )

オブジェクトから指定した値を検索して、該当するプロパティの組み {key: キー, value: 値, parent: 親プロパティの参照} からなる配列を返します。
メソッドチェーンにして利用可能です。

記述例


console.log(myObject.findByValue('eee').get()); // 'eee' の検索と結果の取得
/**
 * [
 *   {
 *     "key": 1,
 *     "value": "eee",
 *     "parent": ["ddd", "eee"]
 *   }
 * ]
 */

console.log(myObject.findByValue('eee').get()); // 'eee' の検索と結果の取得

/**

* [

* {

* "key": 1,

* "value": "eee",

* "parent": ["ddd", "eee"]

* }

* ]

children( key )

オブジェクトの検索結果の子プロパティから指定したキーを検索して、該当するプロパティの組み {key: キー, value: 値, parent: 親プロパティの参照} からなる配列を返します。
検索前に呼び出された場合は、オブジェクト直下の子プロパティから検索されます。
メソッドチェーンにして利用可能です。

記述例


console.log(myObject.find('obj').children('names').get()); // 'obj' > 'name' の検索と結果の取得
/**
 * [
 *   {
 *     "key": "names",
 *     "value": ["ddd", "eee"],
 *     "parent": {"names": ["ddd", "eee"]}
 *   }
 * ]
 */

console.log(myObject.find('obj').children('names').get()); // 'obj' > 'name' の検索と結果の取得

/**

* [

* {

* "key": "names",

* "value": ["ddd", "eee"],

* "parent": {"names": ["ddd", "eee"]}

* }

* ]

keys()

オブジェクト直下に存在する列挙可能なプロパティの配列を返します。
こちらはメソッドチェーンで使うことはできません。
Object.prototype.keys(obj) と同じ機能です

記述例


console.log(myObject.keys()); 
/**
 * ["id","names","obj"]
 */

console.log(myObject.keys());

/**

* ["id","names","obj"]

set( value )

オブジェクトの検索結果のプロパティに値 (value) を設定します。

記述例


myObject.find('obj').children('names').set(['fff', 'ggg']);
console.log(myObject.get()); 
/**
 * {
 *   "id": 1,
 *   "names": ["aaa", "bbb", "ccc"],
 *   "obj": {
 *     "names": ["fff", "ggg"]
 *   }
 * }
 */

myObject.find('obj').children('names').set(['fff', 'ggg']);

console.log(myObject.get());

/**

* {

* "id": 1,

* "names": ["aaa", "bbb", "ccc"],

* "obj": {

* "names": ["fff", "ggg"]

* }

remove()

オブジェクトの検索結果のプロパティを削除します。

記述例


myObject.find('obj').children('names').remove();
console.log(myObject.get()); 
/**
 * {
 *   "id": 1,
 *   "names": ["aaa", "bbb", "ccc"],
 *   "obj": {}
 * }
 */

myObject.find('obj').children('names').remove();

console.log(myObject.get());

/**

* {

* "id": 1,

* "names": ["aaa", "bbb", "ccc"],

* "obj": {}

* }

reset()

検索結果をリセット

記述例


myObject.find('obj').children('names');
console.log(myObject.get()); 
/**
 * 検索後は get(), set(), remove(), reset() を行うまで、get() で検索結果が返ってきます
 * [
 *   {
 *     "key": "names",
 *     "value": ["ddd", "eee"],
 *     "parent": {"names": ["ddd", "eee"]}
 *   }
 * ]
 */

myObject.find('obj').children('names');
myObject.reset()
console.log(myObject.get()); 
/**
 * reset() で検索結果がリセットされているので、get() を行うと、オブジェクト全体が返されます
 * {
 *   "id": 1,
 *   "names": ["aaa", "bbb", "ccc"],
 *   "obj": {
 *     "names": ["ddd", "eee"]
 *   }
 * }
 */