修改 object 属性并将其作为嵌套属性添加到 object

Question

我正在使用来自 x <input>字段的用户输入创建和填充 object。 到目前为止，我已经成功地创建了 object 并使用用户输入填充它。 但是，我坚持下一步。

我想抓取和修改用户输入，并使用逗号将其分隔为嵌套属性进行拆分。

这可能是一项简单的任务，但我想不出一个可行的解决方案。 我怎样才能做到这一点？ （不确定我对自己的解释有多好，所以我发布了一个所需输出的示例）

html：（可能比 2x2 更多的输入字段）

<input type="text" name="test_1.Title" class="tests">
<input type="text" name="test_1.String" class="tests">
<input type="text" name="test_2.Title" class="tests">
<input type="text" name="test_2.String" class="tests">

function objectMaker() {

  function objectSubs(obj, keys, value) {
    let key = keys.shift()
    if (keys.length) {
      obj[key] = obj[key] || {}
      objectSubs(obj[key], keys,  value)
      return
    }
    obj[key] = value
  }

  function grabTestData(){
    var inputs = document.getElementsByClassName('tests');
    var testObject = {}
    Object.keys(inputs).forEach(i => {
      let inputName = inputs[i].getAttribute('name');
      objectSubs(testObject, inputName.split('.'), inputs[i].value)
    })
  }
  grabTestData()

}

当前 object：

var testObject = {
  tests1: {
    title: "random title",
    string: "somestring, other string, and anotherString",
  },
  tests2: {
    title: "other random title",
    string: "thisString, thatString, a String there",
  },
}

所需的 object：

var testObject = {
  tests1: {
    title: "random title",
    string: {
      substring1: "somestring",
      substring2: "other string",
      substring3: "and anotherString",
    },
  },
  tests2: {
    title: "other random title",
    string: {
      substring1: "thisString",
      substring2: "thatString",
    },
  },
}

Answer 1

var testObject = {
  tests1: {
    title: "random title",
    string: "somestring, other string, and anotherString"
  },
  tests2: {
    title: "other random title",
    string: "thisString, thatString, a String there"
  }
};
testObject.tests1.string = testObject.tests1.string.split(",");
testObject.tests2.string = testObject.tests2.string.split(",");
console.log(testObject);

此代码的 output 是：

{
  tests1: {
    title: 'random title',
    string: [ 'somestring', ' other string', ' and anotherString' ]
  },
  tests2: {
    title: 'other random title',
    string: [ 'thisString', ' thatString', ' a String there' ]     
  }
}

Answer 2

如果您想制作 function 以将 object 转换为您想要的格式：

function splitStrings(obj) {
  Object.values(obj).forEach(val => val.string = Object.fromEntries(val.string.split(',').map((e, i) => ["substring"+(i+1), e.trim()])));
  return obj;
}

• 采用 object 和Object.values的值来获取{ title, string }对象的数组
• forEach object，将.string设置为 object，通过将字符串中的每个逗号分隔值转换为格式[substringN, value]的条目创建

---

演示：

 var testObject = { tests1: { title: "random title", string: "somestring, other string, and anotherString", }, tests2: { title: "other random title", string: "thisString, thatString, a String there", }, } function splitStrings(obj) { Object.values(obj).forEach(val => val.string = Object.fromEntries(val.string.split(',').map((e, i) => ["substring"+(i+1), e.trim()]))); return obj; } splitStrings(testObject); console.log(testObject);

---

如果你想要一个子字符串数组，你可以这样做：

function splitStrings(obj) {
  Object.values(obj).forEach(val => val.string = val.string.split(',').map(e=>e.trim());
  return obj;
}