# 用 javascrpit 比較兩個 json 的差異，並且取得差異內容
## 問題
兩個json的差異直接印出來不太好找，想要用程式比對只看差異的部分


## 解法
https://codepen.io/not0000/pen/oNePJXm

const obj1 = {
    "id": 50,
    "name": "AIK",
    "description": "Hejja!",
    "tasks": [{ 'foo': 'bar' }],
    "another1":"you can't see me"
};
const obj2 = {
    "id": 50,
    "name": "DIFF",
    "description": "Hejja!",
    "tasks": [{ 'foo': 'zaz' }],
    "another2":"by john cena"
};

function diff(obj1, obj2) {
    const result = {};
    if (Object.is(obj1, obj2)) {
        return undefined;
    }
    if (!obj2 || typeof obj2 !== 'object') {
        return obj2;
    }
    Object.keys(obj1 || {}).concat(Object.keys(obj2 || {})).forEach(key => {
        if (obj2[key] !== obj1[key] && !Object.is(obj1[key], obj2[key])) {
            result[key] = obj2[key];
        }
        if (typeof obj2[key] === 'object' && typeof obj1[key] === 'object') {
            const value = diff(obj1[key], obj2[key]);
            if (value !== undefined) {
                result[key] = value;
            }
        }
    });
    return result;
}
console.log(JSON.stringify(diff(obj1, obj2), null, 2))

## 注意事項
如果是來源有的屬性，但比較對象沒有，那不會顯示出來的，請見範例的 another1 和 another2 的情形

## 參考來源
[link](http://tlrobinson.net/projects/javascript-fun/jsondiff/#%7B%22d%22%3A%7B%22a%22%3A%22%7B%5C%22format%5C%22%3A%5C%22example%5C%22%2C%5C%22content%5C%22%3A%5B%7B%5C%22align%5C%22%3A%5C%22center%5C%22%2C%5C%22depth%5C%22%3A0%2C%5C%22list%5C%22%3Afalse%2C%5C%22content%5C%22%3A%5B%7B%5C%22style%5C%22%3A%7B%5C%22underline%5C%22%3A1%2C%5C%22bold%5C%22%3A2%2C%5C%22size%5C%22%3A20%2C%5C%22italic%5C%22%3A2%2C%5C%22color%5C%22%3A%5C%22FFFFFF%5C%22%2C%5C%22fontFamily%5C%22%3A%5C%22Arial%5C%22%7D%2C%5C%22content%5C%22%3A%5C%22And%20please%2C%20feel%20free%20to%20send%20us%20your%20feedback%20and%20comments%20to%20%5C%22%7D%2C%7B%5C%22style%5C%22%3A%7B%5C%22underline%5C%22%3A1%2C%5C%22bold%5C%22%3A2%2C%5C%22size%5C%22%3A20%2C%5C%22italic%5C%22%3A2%2C%5C%22color%5C%22%3A%5C%224DC3FF%5C%22%2C%5C%22fontFamily%5C%22%3A%5C%22Arial%5C%22%7D%2C%5C%22content%5C%22%3A%5C%22hello%20world%5C%22%7D%2C%7B%5C%22style%5C%22%3A%7B%5C%22underline%5C%22%3A1%2C%5C%22bold%5C%22%3A2%2C%5C%22size%5C%22%3A20%2C%5C%22italic%5C%22%3A2%2C%5C%22color%5C%22%3A%5C%22FFFFFF%5C%22%2C%5C%22fontFamily%5C%22%3A%5C%22Arial%5C%22%7D%2C%5C%22content%5C%22%3A%5C%22%2C%20or%20just%20by%20clicking%20on%20the%20%5C%22%7D%2C%7B%5C%22style%5C%22%3A%7B%5C%22underline%5C%22%3A1%2C%5C%22bold%5C%22%3A2%2C%5C%22size%5C%22%3A20%2C%5C%22italic%5C%22%3A2%2C%5C%22color%5C%22%3A%5C%224DC3FF%5C%22%2C%5C%22fontFamily%5C%22%3A%5C%22Arial%5C%22%7D%2C%5C%22content%5C%22%3A%5C%22feedback%5C%22%7D%5D%2C%5C%22ordered%5C%22%3Afalse%7D%5D%2C%5C%22version%5C%22%3A3%7D%22%2C%22b%22%3A%22%7B%5C%22format%5C%22%3A%5C%22example%5C%22%2C%5C%22version%5C%22%3A3.1%2C%5C%22content%5C%22%3A%5B%7B%5C%22list%5C%22%3Afalse%2C%5C%22depth%5C%22%3A0%2C%5C%22ordered%5C%22%3Afalse%2C%5C%22content%5C%22%3A%5B%7B%5C%22content%5C%22%3A%5C%22And%20please%2C%20feel%20free%20to%20send%20us%20your%20feedback%20and%20comments%20to%20%5C%22%2C%5C%22style%5C%22%3A%7B%5C%22size%5C%22%3A20%2C%5C%22color%5C%22%3A%5C%22FFFFFF%5C%22%2C%5C%22name%5C%22%3A%5C%22Arial%5C%22%2C%5C%22bold%5C%22%3A2%2C%5C%22italic%5C%22%3A2%2C%5C%22underline%5C%22%3A2%7D%7D%2C%7B%5C%22content%5C%22%3A%5C%22foo%5C%22%2C%5C%22style%5C%22%3A%7B%5C%22size%5C%22%3A20%2C%5C%22color%5C%22%3A%5C%224DC2FF%5C%22%2C%5C%22name%5C%22%3A%5C%22Arial%5C%22%2C%5C%22bold%5C%22%3A2%2C%5C%22italic%5C%22%3A2%2C%5C%22underline%5C%22%3A2%7D%7D%2C%7B%5C%22content%5C%22%3A%5C%22%2C%20or%20just%20by%20clicking%20on%20the%20%5C%22%2C%5C%22style%5C%22%3A%7B%5C%22size%5C%22%3A20%2C%5C%22color%5C%22%3A%5C%22FFFFFF%5C%22%2C%5C%22name%5C%22%3A%5C%22Arial%5C%22%2C%5C%22bold%5C%22%3A2%2C%5C%22italic%5C%22%3A2%2C%5C%22underline%5C%22%3A2%7D%7D%2C%7B%5C%22content%5C%22%3A%5C%22feedback%5C%22%2C%5C%22style%5C%22%3A%7B%5C%22size%5C%22%3A20%2C%5C%22color%5C%22%3A%5C%224DC2FF%5C%22%2C%5C%22name%5C%22%3A%5C%22Arial%5C%22%2C%5C%22bold%5C%22%3A2%2C%5C%22italic%5C%22%3A2%2C%5C%22underline%5C%22%3A2%7D%7D%2C%7B%5C%22content%5C%22%3A%5C%22%20button%20up%20above.%5C%22%2C%5C%22style%5C%22%3A%7B%5C%22size%5C%22%3A20%2C%5C%22color%5C%22%3A%5C%22FFFFFF%5C%22%2C%5C%22name%5C%22%3A%5C%22Arial%5C%22%2C%5C%22bold%5C%22%3A2%2C%5C%22italic%5C%22%3A2%2C%5C%22underline%5C%22%3A2%7D%7D%5D%2C%5C%22align%5C%22%3A%5C%22center%5C%22%7D%5D%7D%22%7D%7D)