如何将 adobe leonardo 输出对象数组转换为更简单的顺风配置对象

Question

我正在尝试转换一个库的输出 (Adobe Leonardo) to a structure required by Tailwind's tailwind.config.js.

Leonardo 的原始输出遵循以下结构：

[
  { background: "#e0e0e0" },
  {
    name: 'gray',
    values: [
      {name: "gray100", contrast: 1, value: "#e0e0e0"},
      {name: "gray200", contrast: 2, value: "#a0a0a0"},
      {name: "gray300", contrast: 3, value: "#808080"},
      {name: "gray400", contrast: 4.5, value: "#646464"}
      ...etc
    ]
  },
  {
    name: 'blue',
    values: [
      {name: "blue100", contrast: 2, value: "#b18cff"},
      {name: "blue200", contrast: 3, value: "#8d63ff"},
      {name: "blue300", contrast: 4.5, value: "#623aff"},
      {name: "blue400", contrast: 8, value: "#1c0ad1"}
      ...etc
    ]
  }
]

为了对配置 Tailwind 有用，我需要将该对象数组转换成如下所示的内容：

  {
    'gray': {
      "gray100": "#e0e0e0",
      "gray200": "#a0a0a0",
      "gray300": "#808080",
      "gray400": "#646464",
    },
    'blue': {
      "blue100": "#b18cff",
      "blue200": "#8d63ff",
      "blue300": "#623aff",
      "blue400": "#1c0ad1",
    }
  }

我怎样才能做到这一点？

Answer 1

您可以为此使用 Array.reduce：

###想法：

循环数据并检查是否需要处理对象。
如果是，
- 创建本地对象
- 循环 values[i].value 并用值更新此对象
- 将此对象指定为 acc[item.name] = object
如果没有，跳过。

const data = [
  { background: "#e0e0e0" },
  {
    name: 'gray',
    values: [
      {name: "gray100", contrast: 1, value: "#e0e0e0"},
      {name: "gray200", contrast: 2, value: "#a0a0a0"},
      {name: "gray300", contrast: 3, value: "#808080"},
      {name: "gray400", contrast: 4.5, value: "#646464"}
    ]
  },
  {
    name: 'blue',
    values: [
      {name: "blue100", contrast: 2, value: "#b18cff"},
      {name: "blue200", contrast: 3, value: "#8d63ff"},
      {name: "blue300", contrast: 4.5, value: "#623aff"},
      {name: "blue400", contrast: 8, value: "#1c0ad1"}
    ]
  }
]

const output = data.reduce((acc, item) => {
  if ('name' in item) {
    const cssMap = {}
    item.values.forEach((value) => cssMap[value.name] = value.value)
    acc[item.name] = cssMap
  }
  return acc
}, {})

console.log(output)

Answer 2

这可以使用 Array.prototype.reduce 函数

完成

const input = [
  { background: "#e0e0e0" },
  {
    name: 'gray',
    values: [
      {name: "gray100", contrast: 1, value: "#e0e0e0"},
      {name: "gray200", contrast: 2, value: "#a0a0a0"},
      {name: "gray300", contrast: 3, value: "#808080"},
      {name: "gray400", contrast: 4.5, value: "#646464"}
    ]
  },
  {
    name: 'blue',
    values: [
      {name: "blue100", contrast: 2, value: "#b18cff"},
      {name: "blue200", contrast: 3, value: "#8d63ff"},
      {name: "blue300", contrast: 4.5, value: "#623aff"},
      {name: "blue400", contrast: 8, value: "#1c0ad1"}
    ]
  }
];

const output = input.reduce((acc, cur) => {
  if (cur.name) {
    acc[cur.name] = cur.values.reduce((curAcc, curVal) => {
      curAcc[curVal.name] = curVal.value;
      return curAcc;
    }, {});
  }
  return acc;
}, {});
console.log(output);

如何将 adobe leonardo 输出对象数组转换为更简单的顺风配置对象

How to convert adobe leonardo output array of objects into an simpler object for tailwind configuration

javascript

arrays

javascript-objects

tailwind-css