如何在将两个元素解析为 JSON 之前合并它们答案

【问题标题】：How to merge two elements before parsing them into JSON如何在将两个元素解析为 JSON 之前合并它们
【发布时间】：2017-09-04 11:31:23
【问题描述】：

我遇到了以下问题：

我已经创建了一个表单，它的输入被解析为 JSON 显示给我（稍后将被传输。）现在每个输入字段的输出都在一个单独的元素中，请参阅：

{
  "hash": "",
  "serviceVersion": "0.5",
  "subject": "yadayada",
  "organisator": "dinitante",
  "roomstyle": [
    "kno"
    "da"
  ]
}

目标是将“organisator”和“roomstyle”组合成“addednote”，并在输出中替换这两个。我尝试了各种方法，但无法正常工作，这似乎有效，但我不知道从哪里开始更改输出：

function join_note()
{
var organisator = document.getElementById('organisator').value;
var roomstyle = document.getElementById('roomstyle').value;
document.getElementById('jointnote').value = roomstyle+organisator;
alert(document.getElementById('jointnote').value);
}

这是接受输入并以 JSON 格式显示输出的 js（Babel）：

const isValidElement = element => {
  return element.name && element.value;
};


const isValidValue = element => {
  return (!['checkbox', 'radio'].includes(element.type) || element.checked);
};


const isCheckbox = element => element.type === 'checkbox';
const isMultiSelect = element => element.options && element.multiple;


const getSelectValues = options => [].reduce.call(options, (values, option) => {
  return option.selected ? values.concat(option.value) : values;
}, []);

const formToJSON_deconstructed = elements => {
  const reducerFunction = (data, element) => {
    data[element.name] = element.value;
    console.log(JSON.stringify(data));
    return data;
  };
  const reducerInitialValue = {};
  console.log('Initial `data` value:', JSON.stringify(reducerInitialValue));
  const formData = [].reduce.call(elements, reducerFunction, reducerInitialValue);
  return formData;
};
const formToJSON = elements => [].reduce.call(elements, (data, element) => {
  if (isValidElement(element) && isValidValue(element)) {
    if (isCheckbox(element)) {
      data[element.name] = (data[element.name] || []).concat(element.value);
    } else if (isMultiSelect(element)) {
      data[element.name] = getSelectValues(element);
    } else {
      data[element.name] = element.value;
    }
  }

  return data;
}, {});
const handleFormSubmit = event => {
  event.preventDefault();
  const data = formToJSON(form.elements);
  const dataContainer = document.getElementsByClassName('results__display')[0];
  dataContainer.textContent = JSON.stringify(data, null, "  ");
};
const form = document.getElementsByClassName('contact-form')[0];
form.addEventListener('submit', handleFormSubmit);

【问题讨论】：

你可以使用生成的 JS 和 HTML 创建一个minimal reproducible example
Codepen example
点击<>你可以在这里发帖

标签： javascript html json forms element

【解决方案1】：

您可以在表单数据发送之前捕获它，然后操作 json。

const json = {
  "hash": "",
  "serviceVersion": "0.5",
  "subject": "yadayada",
  "organisator": "dinitante",
  "roomstyle": [
    "kno"
    "da"
  ]
};

json.addednote = [
  ...json.organisator,
  ...json.roomstyle,
];

delete json.organisator;
delete json.roomstyle;

// You have a ready json object

没有展开运算符：

json.addednote = [
  json.organisator,
];

json.roomstyle.forEach(x => (json.addednote.push(x)));

【讨论】：