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
– Heretic Monkey, Commented Nov 16, 2020 at 18:27
Does this answer your question? How to transpose a javascript object into a key/value array — Heretic Monkey
– Heretic Monkey, Commented Nov 16, 2020 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 I suggest checking out the link if you don't fully understand the difference. — 3limin4t0r
– 3limin4t0r, Commented Nov 16, 2020 at 18:45

phi-rakib · Accepted Answer · 2020-11-16 19:52:15Z

2

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>

edited Nov 16, 2020 at 19:52

answered Nov 16, 2020 at 18:28

phi-rakib

3,3222 gold badges12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rishav Sinha Over a year ago

Yes this is what i was looking for. But any way that i can use it with lodash?

Rishav Sinha Over a year ago

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'

3limin4t0r Over a year ago

Instead of a generic x, why not use array destructuring? eg. ([hex, name], i) => ({id: i + 1, name, hex})

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related