Compare two Object literal files value that uses specific variables and return the value if it has d-CodePudding

I have two set of different Object literal color variables files.

First one is main.js:

const variables = [
    {
      primary: {
        default: ['#fff', 'red', 'green', '#454545', '#333'],
        dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
        uniqueId: 'CK011'
      },
      secondary: {
        default: ['#fff', 'red', 'green', '#454545', '#333'],
        dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
        uniqueId: 'CK021'
      },
      disable: {
        default: ['#fff', 'red', 'green', '#454545', '#333'],
        dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
        uniqueId: 'CK031'
      },
      primaryHover: {
        default: ['#fff', 'red', 'green', '#454545', '#333'],
        dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
        uniqueId: 'CK041'
      },
      secondaryHover: {
        default: ['#fff', 'red', 'green', '#454545', '#333'],
        dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
        uniqueId: 'CK051'
      },
      primaryActive: {
        default: ['#fff', 'red', 'green', '#454545', '#333'],
        dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
        uniqueId: 'CK061'
      },
      secondaryActive: {
        default: ['#fff', 'red', 'green', '#454545', '#333'],
        dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
        uniqueId: 'CK062'
      }
    }
  ];

Another Object literal file is here called second.js. In this file, I have used some variables from main.js file.

const compVariables = [
  { 
    list: {
      listDefault: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK011'
      },
      listHover: {
        default: ['blue'],
        dark: ['var(--primaryHover)'],
        uniqueId: 'CK041'
      },
      listFocus: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK081'
      },
      listActive: {
        default: ['var(--primary)'],
        dark: ['green'],
        uniqueId: 'CK091'
      },
      listDisable: {
        default: ['blue'],
        dark: ['green'],
        uniqueId: 'CK001'
      }
    }
  }
];

What I want to achieve is, I want to compare second.js file with main.js file. I have same and different uniqueId in both files. If any of the lists used variables in second.js file, that has different uniqueId from the main.js it should be returned.

Expected output from this example is:

listDefault, listFocus, listHover and listActive used variables instead of direct color value. So, these 4 lists uniqueId should be compared with main.js color variable. Here we used var(--primary) in listDefault, listFocus and listActive, var(--primaryHover) in listHover.

listDefault and var(--primary) both has same uniqueID - No need to return
listFocus and var(--primary) has different uniqueID - listFocus key should return
listActive and var(--primary) has different uniqueID - listActive key should return
listHover and var(--primaryHover) both has same uniqueID - No need to return

How do I compare two Object literal files value that uses specific variables and return the value if it has differences?

const variables = [
  {
    primary: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK011'
    },
    secondary: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK021'
    },
    disable: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK031'
    },
    primaryHover: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK041'
    },
    secondaryHover: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK051'
    },
    primaryActive: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK061'
    },
    secondaryActive: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK062'
    }
  }
];

function getUniqueID() {
  variables.forEach((element) => {
    Object.entries(element).map(([key, value]) => {
      value.uniqueId;
      console.log(value.uniqueId);
    });
  });
  
  return;
}
getUniqueID();



const compVariables = [
  { 
    list: {
      listDefault: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK011'
      },
      listHover: {
        default: ['blue'],
        dark: ['var(--primaryHover)'],
        uniqueId: 'CK041'
      },
      listFocus: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK081'
      },
      listActive: {
        default: ['var(--primary)'],
        dark: ['green'],
        uniqueId: 'CK091'
      },
      listDisable: {
        default: ['blue'],
        dark: ['green'],
        uniqueId: 'CK001'
      }
    }
  }
];

CodePudding user response：

After trying few hours, I have returned the expected result. Here is stack snippet output and JS code,

function getUniqueID() {
  let myArray = [];
  variables.forEach((element) => {
    Object.entries(element).map(([key, value]) => {
      let result = key `-` value.uniqueId;
       myArray.push(result);
    });
  });
 
  // console.log(myArray.join(''));
  return myArray.join('');
}
// getUniqueID();

function filterValues() {
  compVariables.forEach((element) => {
    Object.entries(element.list).map(([key, value]) => {
      if (value.default[0].includes('var(--') || value.dark[0].includes('var(--')) {
        if (value.default[0].includes('var(--')) {
          var result = removeVar(value.default[0].replace('--',''));
          var result1 = result `-` value.uniqueId;
        }
        if (value.dark[0].includes('var(--')) {
          var result = removeVar(value.dark[0].replace('--',''));
          var result2 = result `-` value.uniqueId;
        }
        // console.log(result1);
        // console.log(result2);

        let idArray = getUniqueID();
        let arrayContains = (idArray.indexOf(result1 || result2) > -1);

        console.log(!arrayContains ? key : 'SAME UNIQUE ID');
      }
    });
  });
}
filterValues();

const variables = [
  {
    primary: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK011'
    },
    secondary: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK021'
    },
    disable: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK031'
    },
    primaryHover: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK041'
    },
    secondaryHover: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK051'
    },
    primaryActive: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK061'
    },
    secondaryActive: {
      default: ['#fff', 'red', 'green', '#454545', '#333'],
      dark: ['blue', 'yellow', 'purple', 'orange', '#777'],
      uniqueId: 'CK062'
    }
  }
];

const compVariables = [
  { 
    list: {
      listDefault: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK011'
      },
      listHover: {
        default: ['blue'],
        dark: ['var(--primaryHover)'],
        uniqueId: 'CK041'
      },
      listFocus: {
        default: ['var(--primary)'],
        dark: ['var(--primary)'],
        uniqueId: 'CK081'
      },
      listActive: {
        default: ['var(--primary)'],
        dark: ['green'],
        uniqueId: 'CK091'
      },
      listDisable: {
        default: ['blue'],
        dark: ['green'],
        uniqueId: 'CK001'
      }
    }
  }
];

function removeVar(string) {
    let result = string.replace('var(', '').replace(')', '');
    return result;
}

function getUniqueID() {
  let myArray = [];
  variables.forEach((element) => {
    Object.entries(element).map(([key, value]) => {
      let result = key `-` value.uniqueId;
       myArray.push(result);
    });
  });
 
  // console.log(myArray.join(''));
  return myArray.join('');
}
// getUniqueID();

function filterValues() {
  compVariables.forEach((element) => {
    Object.entries(element.list).map(([key, value]) => {
      if (value.default[0].includes('var(--') || value.dark[0].includes('var(--')) {
        if (value.default[0].includes('var(--')) {
          var result = removeVar(value.default[0].replace('--',''));
          var result1 = result `-` value.uniqueId;
        }
        if (value.dark[0].includes('var(--')) {
          var result = removeVar(value.dark[0].replace('--',''));
          var result2 = result `-` value.uniqueId;
        }
        // console.log(result1);
        // console.log(result2);

        let idArray = getUniqueID();
        let arrayContains = (idArray.indexOf(result1 || result2) > -1);

        console.log(!arrayContains ? key : 'SAME UNIQUE ID');
      }
    });
  });
}
filterValues();