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

Question

我正在使用来自 x <input> 个字段的用户输入创建并填充一个对象。到目前为止，我已经设法创建对象并使用用户输入填充它。但是我在下一步中遇到了困难。

我想抓取并修改用户输入并使用逗号分隔将其分隔成嵌套属性。

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

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()

}

当前对象：

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

想要的对象：

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

这段代码的输出是：

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

Answer 2

如果你想制作一个函数将对象转换成你想要的格式：

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.values 获取对象的值以获得 { title, string } 个对象的数组
forEach 对象，将 .string 设置为通过将字符串中的每个逗号分隔值转换为格式 [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;
}

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

modify object property and add it to object as nested properties

html

javascript

nested

object

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

modify object property and add it to object as nested properties

html

javascript

nested

object

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