compare two JSON have the same properties

 

두개의 JSON 값 비교 하기 : compare two JSON have the same properties

 

1. 값을 문자열로 바꾸어서 비교해보기

JSON.stringify() 로 값을 JSON 표기법의 문자열로 바꾸어서 비교.

 

JSON.stringify()

값의 형태가 정해져 있고, 아래의 조건을 명확하게 벗어난 경우라면 제일 간단하게 사용해볼만 하다.

 

• 배열이 아닌 객체의 속성들은 어떤 특정한 순서에 따라 문자열화 될 것이라고 보장되지 않는다. 
  같은 객체의 문자열화에 있어서 속성의 순서에 의존하지 않는다.
• Boolean, Number, String 객체들은 문자열화 될 때 전통적인 변환 의미에 따라 연관된 기본형(primitive) 값으로 
  변환된다.
• undefined, 함수, 심볼(symbol)은 변환될 때 생략되거나(객체 안에 있을 경우) null 로 변환된다
  (배열 안에 있을 경우).
• 심볼을 키로 가지는 속성들은 replacer 함수를 사용하더라도 완전히 무시된다.
  
  
• 열거 불가능한 속성들은 무시된다.

JSON.stringify({});                  // '{}'
JSON.stringify(true);                // 'true'
JSON.stringify('foo');               // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 });            // '{"x":5}'

JSON.stringify(new Date(2006, 0, 2, 15, 4, 5)) 
// '"2006-01-02T15:04:05.000Z"'

JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'

// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
JSON.stringify({ [Symbol('foo')]: 'foo' });
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
  if (typeof k === 'symbol') {
    return 'a symbol';
  }
});
// '{}'

// Non-enumerable properties:
JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
// '{"y":"y"}'

 

2. JSON객체의 key, value 비교를 통한 방법

 

아래와 같이 직접 객체를 순회하면서 값을 반환하는 함수를 만들어 사용해볼 수 있다.

 

그러나 오직 평면적인 key - value 만 비교가 가능하다. 

 

즉 {"key":key, "value":value ...} 는 가능하나

{"key":key, "value": [ {"key":key, "value": {"key":key, "value":value ...} } ] ...} 처럼 객체의 깊이와 데이터타입이 혼재되어 있는경우 함수를 변경해줘야한다...

function compareTwoJson(obj1, obj2){
  var isSameObj=true;

  if(Object.keys(obj1).length==Object.keys(obj2).length){
      for(key in obj1) { 
          if(obj1[key] == obj2[key]) {
              continue;
          }
          else {
              isSameObj=false;
              break;
          }
      }
  }
  else {
      isSameObj=false;
  }
  return isSameObj;
}

 

3. loadash 의 _.isEqual 사용

 

https://lodash.com/docs#isEqual

 

이 메서드는 배열, 배열 버퍼, 부울, 날짜 오브젝트, 오류 오브젝트, 맵, 숫자, Object오브젝트, 정규 표현식, 세트, ​​문자열, 기호 및 유형 배열 비교를 지원한다. 객체는 상속없이 객체 자체적으로 열거 가능한 속성으로 비교한다. 함수와 DOM 노드는 === 로 비교하여 검사한다.

_.isEqual(value, other)

 

Performs a deep comparison between two values to determine if they are equivalent.

Note: This method supports comparing arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, and typed arrays. Object objects are compared by their own, not inherited, enumerable properties. Functions and DOM nodes are compared by strict equality, i.e. ===.

 

in a browser (CDN)

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>

 

Download

lodash.min.js

0.07MB

 

npm

$ npm i -g npm
$ npm i --save lodash

 

client use

let remoteJSON = {};
let localJSON = {};
remoteJSON = {"myName":"serpiko", "type":"blog"};
localJSON = {"myName":"serpiko", "type":"blog"};
console.log( "[1]", _.isEqual(remoteJSON, localJSON) ); // true

remoteJSON = {"myName":"serpiko", "type":"blog"};
localJSON = {"myName":"serpiko", "type":"human"};
console.log( "[2]", _.isEqual(remoteJSON, localJSON) ); // false

remoteJSON = {"list":[
	{"id":1, "myName":"serpiko", "type":"blog"},
  {"id":2, "myName":"superman", "type":"hero"}
]};
localJSON = {"list":[
	{"id":1, "myName":"serpiko", "type":"blog"},
  {"id":2, "myName":"superman", "type":"hero"}
]};
console.log( "[3]", _.isEqual(remoteJSON, localJSON) ); // true

remoteJSON = {"list":[
	{"id":1, "myName":"serpiko", "type":"blog"},
  {"id":2, "myName":"superman", "type":"hero"}
]};
localJSON = {"list":[
	{"id":1, "myName":"serpiko", "type":"blog"},
  {"id":2, "myName":"superman!", "type":"hero"}
]};
console.log( "[3]", _.isEqual(remoteJSON, localJSON) ); // false

result