如何根据自定义提供的键和值数据创建记录？

Question

我仍然是 JavaScript 的初学者，我需要根据用户在输入字段中键入的内容创建一个对象。

这是我表单上的输入字段：

用户输入列和值的值后，这是接收数据的方式：

[
  [{
      label: "Column",
      value: "column1",
      name: "01",
    },
    {
      label: "Value",
      value: "value1",
      name: "02",
    },
  ],
  [{
      label: "Column",
      value: "column2",
      name: "10",
    },
    {
      label: "Value",
      value: "value2",
      name: "11",
    },
  ],
];

但是发送数据库不是这样保存的，我需要发送的方式是这样的：

{
  // other data
  
  "column_names": {
    "column1": "value1",
    "column2": "value2"
  }
}

你能告诉我如何根据用户输入的内容创建对象吗？但是在我在第二个代码片段中显示的结构中？

Answer 1

您的预期结果是基于对象设计的，您可以按名称对值进行分组，这有点冗长，但如果您想改进对象设计以完成相同的任务，我有建议的代码试试这个

在输入字段上使用 data 属性及其名称然后获取一个对象中的所有值及其相应的键名，请参见下面的示例

function getData(root){
    const Els = root.querySelectorAll("[data]"),newOb = {}
    Els.forEach(each=>{
        let key = each.getAttribute("data"), val = each.value
        newOb[key] = val
    })
    return newOb            
}
const main = document.querySelector(".root")
main.oninput = function(){console.log(getData(main))}

<div class="root">
    <input class="border" data="col1" type="text">
    <input class="border" data="col2" type="text">
    <input class="border" data="col3" type="text">
    <input class="border" data="col4" type="text">
</div>

Answer 2

OP 提供的数据结构可以看作是一个对象条目数组，其中每个条目包含一个键和值相关元数据的元组。

因此，一种直接的方法是 reduce 将提供的数据放入所需的记录中。

const receivedData = [
  [{
    label: "Column",
    value: "column1",
    name: "01",
  }, {
    label: "Value",
    value: "value1",
    name: "02",
  }], [{
    label: "Column",
    value: "column2",
    name: "10",
  }, {
    label: "Value",
    value: "value2",
    name: "11",
  }],
];

const recordData = {

  // other data

  "column_names": receivedData
    .reduce((data, [ keyData, valueData ]) => {
      const key = keyData.value;
      const { value } = valueData;
      return Object.assign(data, { [key]: value });
    }, {})
};
console.log({ recordData });

.as-console-wrapper { min-height: 100%!important; top: 0; }

如何根据自定义提供的键和值数据创建记录？

How does one create a record, based on custom provided key and value data?

javascript

arrays

reduce

object

data-structures