主页 / 问题 / 1022212
Accepted
De.Minov
Asked:2020-09-11 02:18:39 +0000 UTC2020-09-11 02:18:39 +0000 UTC

通过遍历元素来组装对象

  • 772

有一组元素，它们看起来像这样：

<div>
    <input type="text" name="nameOne_aaa">
    <input type="text" name="nameOne_bbb">
    <input type="text" name="nameOne_ccc">
    <input type="text" name="nameOne_ddd">
</div>

<div>
    <input type="text" name="nameTwo_aaa">
    <input type="text" name="nameTwo_bbb">
    <input type="text" name="nameTwo_ccc">
    <input type="text" name="nameTwo_ddd">
</div>

如何从中组装一个对象，这种类型：

{
    "nameOne": {
        "aaa": "",
        "bbb": "",
        "ccc": "",
        "ddd": ""
    },
    "nameTwo": {
        "aaa": "",
        "bbb": "",
        "ccc": "",
        "ddd": ""
    }
}

其中arr[n]- 键等于属性中的值（之前name的部分），值 ( ) 等于另一个对象， 其中- 键等于属性（之后的部分），值等于this '一个或 _arr[n][n]
arr[n][n][name] _valueinputtextarea

javascript

3 个回答

  1. Best Answer

    let input = document.querySelectorAll('input[type="text"]');

let json = {}

for( let i = 0; i < input.length; i++ ){
  let name = input[i].name.match(/^(.+?)_(.+)$/); // (*1)
  let key = name[1];
  let val = name[2];

  if( !json[key] ){ // Если объекта с найденным именем еще нет - создаем.
    json[key] = {}
  }

  json[key][val] = "";
}

console.log( json );
    <div>
  <input type="text" name="nameOne_aaa">
  <input type="text" name="nameOne_bbb">
  <input type="text" name="nameOne_ccc">
  <input type="text" name="nameOne_ddd">
</div>

<div>
  <input type="text" name="nameTwo_aaa">
  <input type="text" name="nameTwo_bbb">
  <input type="text" name="nameTwo_ccc">
  <input type="text" name="nameTwo_ddd">
</div>

    (*1): .name.match(/^(.+?)_(.+)$/)-^字符串的开头，$- 字符串的结尾。.点匹配任何字符，加+号表示“一次或多次”。在这种情况下，match 返回一个找到的匹配数组。
    假设 nameTwo_aaa 将返回他们的字符串["nameTwo_aaa", "nameTwo", "aaa"]- 从那里你可以在索引 [1] 和 [2] 处获得第二个和第三个元素

    Ps 是的，使用 split 会更有意义，就像在下一个答案中一样！）

    • 3 

  2. let inputs = document.querySelectorAll('input');

const obj = {};

inputs.forEach( input => {
  
  const names = input.getAttribute("name").split('_');
 
  if (!obj.hasOwnProperty(names[0])) {
    obj[names[0]] = {};
  }
  
  obj[names[0]][names[1]] = '';
  
});

console.log(obj);
    <div class="select">
    <input type="text" name="nameOne_aaa">
    <input type="text" name="nameOne_bbb">
    <input type="text" name="nameOne_ccc">
    <input type="text" name="nameOne_ddd">
</div>

<div class="select">
    <input type="text" name="nameTwo_aaa">
    <input type="text" name="nameTwo_bbb">
    <input type="text" name="nameTwo_ccc">
    <input type="text" name="nameTwo_ddd">
</div>

    • 3

  3. 像这样，例如：

    let result = [...document.querySelectorAll('input')]
  .map(el => el.name)
  .reduce((a, e) => {
    let b = e.split('_'), c = b[0];
    return (a[c] || (a[c] = {}))[b[1]] = "", a;
  }, {});

console.log(result)
    <div>
    <input type="text" name="nameOne_aaa">
    <input type="text" name="nameOne_bbb">
    <input type="text" name="nameOne_ccc">
    <input type="text" name="nameOne_ddd">
</div>

<div>
    <input type="text" name="nameTwo_aaa">
    <input type="text" name="nameTwo_bbb">
    <input type="text" name="nameTwo_ccc">
    <input type="text" name="nameTwo_ddd">
</div>

    • 2

相关问题