Turn 3 objects into multidimensional array

Question

I have 3 objects which contain information about svg icons (FontAwesome). Every object has the same structure but the prefix property has a different value. The object below uses fab as the prefix, the second far and the third fas.

{
  "facebook": {
    "prefix": "fab",
    "iconName": "facebook-alt",
    "icon": [
      448,
      512,
      [],
      "f26e",
      "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"
    ]
  },
  "twitter": {
    "prefix": "fab",
    "iconName": "twitter",
    "icon": [
      448,
      512,
      [],
      "f368",
      "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"
    ]
  },
  "instagram": {
    "prefix": "fab",
    "iconName": "instagram",
    "icon": [
      640,
      512,
      [],
      "f369",
      "M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"
    ]
  },
}

Second object:

{
  "arrowUp": {
    "prefix": "far",
    "iconName": "arrow-up",
    "icon": [
      448,
      512,
      [],
      "f26e",
      "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"
    ]
  },
  "arrowLeft": {
    "prefix": "far",
    "iconName": "arrow-left",
    "icon": [
      448,
      512,
      [],
      "f368",
      "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"
    ]
  },
  "arrowRight": {
    "prefix": "far",
    "iconName": "arrow-right",
    "icon": [
      640,
      512,
      [],
      "f369",
      "M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"
    ]
  },
}

Third object:

{
  "carrot": {
    "prefix": "fas",
    "iconName": "carrot",
    "icon": [
      448,
      512,
      [],
      "f26e",
      "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"
    ]
  },
  "cat": {
    "prefix": "fas",
    "iconName": "cat",
    "icon": [
      448,
      512,
      [],
      "f368",
      "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"
    ]
  },
  "dog": {
    "prefix": "fas",
    "iconName": "dog",
    "icon": [
      640,
      512,
      [],
      "f369",
      "M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"
    ]
  },
}

I am trying to turn the 3 objects seen above into this:

"brands": [
  "facebook",
  "twitter",
  "instagram",
],
"regular": [
  "arrow-up",
  "arrow-left",
  "arrow-right",
],
"solid": [
  "carrot",
  "cat",
  "dog",
],

The tricky part is also changing the prefix name into another value for the array. fab would be brands, far regular, and fas solid.

I am using React and have Babel. Here's what I have so far...

const objects = [
    ...Object.values( fab ),
    ...Object.values( far ),
    ...Object.values( fas ),
]

It turns all the objects into arrays but I'm not sure how to get the structure i want.

And for changing the prefix into a name I believe this is a good start... This is just an example for changing fab into brands

//find the index of object from array
const objIndex = objects.findIndex(obj => obj.value === 'fab');

// make new object of updated object   
const updatedObj = { ...objects[objIndex], prefix: 'brands'};

// make new array of objects
const updatedObjects = [
  ...objects.slice(0, objIndex),
  updatedObj,
  ...objects.slice(objIndex + 1),
];

dan · Accepted Answer · 2019-01-03 17:57:48Z

2

Edit: Added conversion of camel-case to dashes

If the objects are always sectioned out as you posted, could you not just do something like:

const convertStrings = (str) => {
  return str.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
};

const objects = {
  "brands": Object.keys(fab).map(convertStrings),
  "regular": Object.keys(far).map(convertStrings),
  "solid": Object.keys(fas).map(convertStrings),
}

Which gave me the output:

{
  brands: ["facebook", "twitter", "instagram"],
  regular: ["arrow-up", "arrow-left", "arrow-right"],
  solid: ["carrot", "cat", "dog"]
}

https://jsbin.com/soxekedepe/edit?js,console

edited Jan 3, 2019 at 17:57

answered Jan 3, 2019 at 17:31

dan

1,3749 silver badges25 bronze badges

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

Comments

Code Maniac · Accepted Answer · 2019-01-03 18:08:03Z

1

You're looking for Keys of object which you can easily get from Object.keys()

let obj1= {"facebook": { "prefix": "fab", "iconName": "facebook-alt","icon": [ 448, 512, [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7" ]},"twitter": {"prefix": "fab",    "iconName": "twitter", "icon": [  448,  512, [],   "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"  ] },"instagram": {"prefix": "fab","iconName": "instagram", "icon": [ 640, 512, [], "f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},}
let obj2={"arrowUp": { "prefix": "far", "iconName": "arrow-up", "icon": [ 448,  512,  [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]},"arrowLeft": { "prefix": "far", "iconName": "arrow-left", "icon": [ 448, 512,[],     "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5" ]}, "arrowRight": { "prefix": "far", "iconName": "arrow-right", "icon": [  640, 512, [],"f369", "M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},}
let obj3 ={"carrot": {"prefix": "fas", "iconName": "carrot","icon": [ 448, 512, [],"f26e","M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]}, "cat": { "prefix": "fas", "iconName": "cat", "icon": [    448, 512, [],"f368","M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"]}, "dog": { "prefix": "fas", "iconName": "dog", "icon": [     640, 512, [],"f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2" ]},}

let op = [
  {'brand': Object.keys(obj1)},
  {'regular': Object.keys(obj2).map(e=> obj2[e].iconName)},
  {'solid':  Object.keys(obj3)}
]

console.log(op)

edited Jan 3, 2019 at 18:08

answered Jan 3, 2019 at 17:34

Code Maniac

37.9k5 gold badges44 silver badges65 bronze badges

5 Comments

CyberJunkie Over a year ago

Sorry my bad, I removed the comment. There is another issue however. The code is creating array groups with the object key value, as the array key value. The key of the array has to be the iconName value from the object. For example, {"arrowUp": { "prefix": "far", "iconName": "arrow-up" ... should turn into "regular": ["arrow-up", ... not "regular": ["arrowUp", ...

dan Over a year ago

@CyberJunkie Edited my answer to include the camel-case conversion

Code Maniac Over a year ago

@CyberJunkie you can check the updated one.all you need is just use regex to find the uppercase letter and add - and change matched characters to lowercase

CyberJunkie Over a year ago

@CodeManiac sorry, I don't think I explained properly. There is no need for camel case conversion. I just want to replace the key value with the value of iconName from its array. As a better example, {"randomNameHere": { "prefix": "far", "iconName": "arrow-up" ... where I just need to grab the iconName value and use it to replace randomNameHere. The key name may differ from the iconName so it cannot be converted with regex.

Code Maniac Over a year ago

@CyberJunkie i didn't noticed iconName. you can check the updated one

ahrs · Accepted Answer · 2019-01-03 17:48:00Z

You can use Object.keys to get the key names and then map over the values, returning obj[k].iconName:

let fab= {"facebook": { "prefix": "fab", "iconName": "facebook-alt","icon": [ 448, 512, [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7" ]},"twitter": {"prefix": "fab",    "iconName": "twitter", "icon": [  448,  512, [],   "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"  ] },"instagram": {"prefix": "fab","iconName": "instagram", "icon": [ 640, 512, [], "f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},}
let far={"arrowUp": { "prefix": "far", "iconName": "arrow-up", "icon": [ 448,  512,  [], "f26e", "M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]},"arrowLeft": { "prefix": "far", "iconName": "arrow-left", "icon": [ 448, 512,[],     "f368", "M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5" ]}, "arrowRight": { "prefix": "far", "iconName": "arrow-right", "icon": [  640, 512, [],"f369", "M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2"]},}
let fas ={"carrot": {"prefix": "fas", "iconName": "carrot","icon": [ 448, 512, [],"f26e","M103.3 344.3c-6.5-14.2-6.9-18.3 7.4-23.1 25.6-8 8 9.2 43.2 49.2h.3v-93.9c1.2-50.2 44-92.2 97.7-92.2 53.9 0 97.7 43.5 97.7 96.8 0 63.4-60.8 113.2-128.5 93.3-10.5-4.2-2.1-31.7"]}, "cat": { "prefix": "fas", "iconName": "cat", "icon": [    448, 512, [],"f368","M423.9 255.8L411 413.1c-3.3 40.7-63.9 35.1-60.6-4.9l10-122.5-41.1 2.3c10.1 20.7 15.8 43.9 15.8 68.5 0 41.2-16.1 78.7-42.3 106.5l-39.3-39.3c57.9-63.7 13.1-167.2-74-167.2-25.9 0-49.5"]}, "dog": { "prefix": "fas", "iconName": "dog", "icon": [     640, 512, [],"f369","M482.2 372.1C476.5 365.2 250 75 242.3 65.5c-13.7-17.2 0-16.8 19.2-16.9 9.7-.1 106.3-.6 116.5-.6 24.1-.1 28.7.6 38.4 12.8 2.1 2.7 205.1 245.8 207.2 248.3 5.5 6.7 15.2 19.1 7.2" ]},}

let op = [
  {"brands": Object.keys(fab)},
  {"regular": Object.keys(far).map(k => { return far[k].iconName; })},
  {"solid": Object.keys(fas).map(k => { return fas[k].iconName; })}
]

console.log(op)

Collectives™ on Stack Overflow

Turn 3 objects into multidimensional array

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related