Converting a object to array of objects using Lodash with custom key pair

Question

So I have a huge color file stored like this which is basically a list of colors, represented like this

export const COLORS = {
    '#4c4f56': 'Abbey',
    '#0048ba': 'Absolute Zero',
    '#1b1404': 'Acadia',
    '#7cb0a1': 'Acapulco',
    '#b0bf1a': 'Acid Green',
    '#7cb9e8': 'Aero',
    '#c9ffe5': 'Aero Blue',
    '#714693': 'Affair',
    '#b284be': 'African Violet',
    '#00308f': 'Air Force Blue',
    '#72a0c1': 'Air Superiority Blue',
    '#d4c4a8': 'Akaroa',
    '#af002a': 'Alabama Crimson',
    '#fafafa': 'Alabaster',
    '#f5e9d3': 'Albescent White',
    '#93dfb8': 'Algae Green',
}

Now, I want to use this is my react component basically inside a reducer intialState, but the thing is I want to filter it using any search input, so I need to convert this into a array, so I can use array methods. For example if user search for color alabaster it will return the color.

Now the Data structure I am looking to convert the above object is like this.

[
  {id: 1,name: 'Abbey',hex: '#4c4f56'}
  {id: 2,name: 'Acadia',hex: '#0048ba'}
  {id: 3,name: 'Acapulco',hex: '#7cb0a1'}
  {id: 4,name: 'Aero',hex: '#b0bf1a'}    
]

so what I used is lodash and toPairs and fromPairs, it does the job but not with the correct DS

let data = _.map(_.toPairs(COLORS), (d) => _.fromPairs([d]));

Is there any way we can convert this.

Answer 1

You could use Array.prototype.map() method. Get the key value pairs using Object.entries() method and then map it to make your required object array.

 const COLORS = { '#4c4f56': 'Abbey', '#0048ba': 'Absolute Zero', '#1b1404': 'Acadia', '#7cb0a1': 'Acapulco', '#b0bf1a': 'Acid Green', '#7cb9e8': 'Aero', '#c9ffe5': 'Aero Blue', '#714693': 'Affair', '#b284be': 'African Violet', '#00308f': 'Air Force Blue', '#72a0c1': 'Air Superiority Blue', '#d4c4a8': 'Akaroa', '#af002a': 'Alabama Crimson', '#fafafa': 'Alabaster', '#f5e9d3': 'Albescent White', '#93dfb8': 'Algae Green', }; const ret = Object.entries(COLORS).map(([hex, name], i) => ({ id: i + 1, name, hex, })); console.log(ret);

Equivalent code in Lodash:

 const COLORS = { '#4c4f56': 'Abbey', '#0048ba': 'Absolute Zero', '#1b1404': 'Acadia', '#7cb0a1': 'Acapulco', '#b0bf1a': 'Acid Green', '#7cb9e8': 'Aero', '#c9ffe5': 'Aero Blue', '#714693': 'Affair', '#b284be': 'African Violet', '#00308f': 'Air Force Blue', '#72a0c1': 'Air Superiority Blue', '#d4c4a8': 'Akaroa', '#af002a': 'Alabama Crimson', '#fafafa': 'Alabaster', '#f5e9d3': 'Albescent White', '#93dfb8': 'Algae Green', }; const ret = _.map(_.toPairs(COLORS), ([hex, name], i) => ({ id: i + 1, name, hex, })); console.log(ret); // for finding color const colorObj = _.find(ret, (x) => x.name === 'Air Superiority Blue'); console.log(colorObj); console.log(colorObj.hex); // color // for list of colors which has blue inside the name const colors = _.filter(ret, (x) => x.name.toLowerCase().includes('blue')); console.log(colors);

 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js"></script>