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.

The hex values differ between the file and your array of objects. Is this on purpose? — Heretic Monkey, Nov 16 '20 at 18:27
Does this answer your question? [How to transpose a javascript object into a key/value array](https://stackoverflow.com/questions/36411566/how-to-transpose-a-javascript-object-into-a-key-value-array) — Heretic Monkey, Nov 16 '20 at 18:29
*"Converting a JSON object to array of objects using Lodash with custom key pair"* The word "JSON" in the original title was removed, because [JSON is not JavaScript](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation/2904181#2904181) I suggest checking out the link if you don't fully understand the difference. — 3limin4t0r, Nov 16 '20 at 18:45

mr hr · Answer 1 · 2020-11-16T19:52:15.733

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>

Yes this is what i was looking for. But any way that i can use it with lodash? — Rishav Sinha, Nov 16 '20 at 18:33
thank you.. Do you also now any way of like searching for blue in the object?And return colors which have blue in it? like 'Air Superiority Blue' — Rishav Sinha, Nov 16 '20 at 19:30
Instead of a generic `x`, why not use [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)? eg. `([hex, name], i) => ({id: i + 1, name, hex})` — 3limin4t0r, Nov 16 '20 at 19:47

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

1 Answers1