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

Question

我遇到了以下问题：

我创建了一个表单，其中的输入被解析为 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);

Answer 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)));

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

How to merge two elements before parsing them into JSON

html

javascript

forms

json

element