Question

以下代码将从我的表单中输出所有键和值：

this.primaryFormGroup.valueChanges.subscribe(inputFields => {
  console.log(inputFields);
}

它将输出所有值，即使它们为空，但这也不是我想要的。

Object.entries(inputFields).filter(([key, value]) => value)

这将仅输出不为空的值。到目前为止，一切都很好。

我的问题

输出始终是一个数组，但我想要的是JSON。

我已经用JSON.stringify(Object.entries(inputFields).filter(([key, value]) => value));尝试过了，这就是输出的样子：

[[“ title”，“ Hello”]，[“ description”，“我是 text“]，[” tech“，[” javaScript“，” CSS“]]]

在我的情况下，键tech的值应该是一个数组，因为它已经定义为数组，但其他所有值都应该是JSON。

我该怎么做？

Answer 1

要过滤掉所有空值或空值，可以尝试以下操作：

this.primaryFormGroup.valueChanges.subscribe(inputFields => {
  const clean = Object.keys(inputFields).filter(k => !!inputFields [k]).reduce((acc, curr) => {
          acc[curr] = inputFields[curr];
          return acc;
  }, {});
}

注意：此解决方案不适用于深层表格。

Answer 2

// assuming initial values of all form controls is undefined.
const formValues = this.primaryFormGroup.value;

const formValuesWithNoundefinedKeys = JSON.parse(JSON.stringify(formValues));

// formValuesWithNoUndefinedKeys won't contain any keys with undefined values

如果还需要删除空值，则可以为JSON.stringify函数提供一个REPLACER函数。

以下示例片段：

const obj = {a: undefined, b:1}

const objWithNoUndefinedValues = JSON.parse(JSON.stringify(obj))
// objWithNoUndefinedValues => {b: 1}

console.log(objWithNoUndefinedValues)

将所有现有值返回为JSON

2 个答案: