提取具有多个值的对象并使用 Javascript 传递它们

Question

我有一个要解析的对象。

看起来像这样：

var inputDescriptions = {
  customText: {
    message: "this is a message",
    note: "this is a note"
  },
  tool: "wrench",
  garage: "two-door",
  "garage-color": "white",
  message: "message",
  "message-color": "white",
  note: "note"
};

在解析结束时，我希望它是一个包含项目和描述的数组，如下所示：

这被称为“输入描述”

[{
  item: "tool",
  description: "wrench"
}, {
  item: "garage",
  description: "two-door"
}, {
  item: "garage-color",
  description: "white"
}, {
  item: "noteText",
  description: "this is a note"
}, {
  item: "messageText",
  description: "this is a message"
}, {
  item: "message",
  description: "message"
}, {
  item: "note",
  description: "note"
}]

我真的被一个具有两个属性的对象所抛弃。

这是我拥有的功能：

const parseSelections = (inputDescriptions) => {
  return Object.keys(inputDescriptions).map((choiceId) => {
    const optionId = inputDescriptions[choiceId];
    const userSelectionInput = {
      choiceId,
      optionId,
    };
    return userSelectionInput;
  });
};

const selections = parseSelections(inputDescriptions);

它接近但不完全在那里：

[
{item: "tool", description: "wrench"}
{item: "garage", description: "two-door"}
{item: "garage-color", description: "white"}
{item: "customText", description: {message: "this is a message", note: "this is a note"}
{item: "message", description: "message"}
{item: "note", description: "note"}
]

我尝试使用 Object.assign 拉出 customText 对象并重新分配，但我仍然无法让它工作。也许我需要创建一个新函数来再次解析？我觉得我离得很近，但物体却把我甩了。有没有人有更好的方法来做到这一点？

Answer 1

您需要从对象中移除customText属性并单独处理。

let inputDescriptions = {
  customText: {
    message: "this is a message",
    note: "this is a note"
  },
  tool: "wrench",
  garage: "two-door",
  "garage-color": "white",
  message: "message",
  "message-color": "white",
  note: "note"
};


const parseSelections = (inputDescriptions) => {
  inputDescriptions = Object.assign({}, inputDescriptions); // clone object
  let customText = inputDescriptions.customText;
  delete inputDescriptions.customText;
  return Object.keys(inputDescriptions).map((choiceId) => {
    const optionId = inputDescriptions[choiceId];
    const userSelectionInput = {
      choiceId,
      optionId,
    };
    return userSelectionInput;
  }).concat(
    Object.entries(customText).map(([key, val]) => ({
      choiceId: `${key}Text`,
      optionId: val
    }))
  );
};

const selections = parseSelections(inputDescriptions);
console.log(selections);

Answer 2

如果输入的类型是对象，只需递归调用您的函数：

if (typeof inputDescriptions[choiceId] === "object") {
  return parseSelections(inputDescriptions[choiceId]);
}

函数会返回一个嵌套数组，你可以flat

const inputDescriptions = {
  customText: {
    message: "this is a message",
    note: "this is a note"
  },
  tool: "wrench",
  garage: "two-door",
  "garage-color": "white",
  message: "message",
  "message-color": "white",
  note: "note"
};

const parseSelections = (inputDescriptions, suff) => {
  return Object.keys(inputDescriptions).map(choiceId => {
    if (typeof inputDescriptions[choiceId] === "object") {
      return parseSelections(inputDescriptions[choiceId], "Text");
    } else {
      const optionId = inputDescriptions[choiceId];
      const userSelectionInput = {
        [choiceId + suff]: choiceId,
        optionId
      };

      return userSelectionInput;
    }
  });
};

const selections = parseSelections(inputDescriptions, '').flat();

console.log(selections);

Answer 3

我强烈建议您重组数据，以节省您的开发时间和以后的麻烦。再加上这将是一场噩梦。您可以使用对象循环并使用值传播键，但我建议您创建一个新的 Arr 对象，如下所示。使用起来会容易得多，其他任何阅读数据的人都会对数据有更好的理解。使用此结构，您可以遍历项目以及是否需要遍历该项目上的对象。希望它可以避免一些头痛。

let items = [
  {
  item: "tool",
  description:"Wrench"
},
{
  item: "garage",
  description:"two-door",
  garageColor:"some color"
},
{
  item: "some item",
  description:"des"

},
{
  item: "tool two",
  description:"Wrench 2"
},
{
  item: "customText",
  message:"this is a message",
  note:"this is a note",
}

]