Превратите 3 объекта в многомерный массив - PullRequest
Новая
       0

Превратите 3 объекта в многомерный массив

0 голосов
/ 03 января 2019

У меня есть 3 объекта, которые содержат информацию о значках SVG (FontAwesome).Каждый объект имеет одинаковую структуру, но свойство prefix имеет свое значение.В приведенном ниже объекте в качестве префикса используется fab, второй far и третий 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"
    ]
  },
}

Второй объект: 

{
  "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"
    ]
  },
}

Третий объект: 

{
  "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"
    ]
  },
}

Я пытаюсь превратить 3 объекта, описанных выше, в следующее: 

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

Сложная часть также меняет имя префикса на другое значение для массива.fab будут марки, far обычные и fas твердые.

Я использую React и имею Babel.Вот что у меня есть ... 

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

Превращает все объекты в массивы, но я не уверен, как получить желаемую структуру.

И для изменения префиксав имя, я считаю, что это хорошее начало ... Это просто пример для изменения fab в 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),
];

Ответы [ 3 ]

0 голосов
/ 03 января 2019

Вы ищете ключи объекта, которые вы можете легко получить от 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)
0 голосов
/ 03 января 2019

Вы можете использовать Object.keys, чтобы получить имена ключей, а затем отобразить значения, возвращая 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)
0 голосов
/ 03 января 2019

Редактировать: Добавлено преобразование верблюжьего футляра в тире

Если объекты всегда разделены, как вы разместили, не могли бы вы просто сделать что-то вроде: 

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),
}

Что дало мневыход: 

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...