入力タグのdomオブジェクトをフィルタリングする

Question

現在、サーバ側でレンダリングされているフォームからオブジェクトを構築しています。私は下の画像に表示されているすべてのチェックボックスを集めて、各ステップ（1,2,3など）のすべてのチェックボックスがプロパティparentNodeに基づく単一のオブジェクトであるように並べ替えようとしています。

現在、document.querySelectorAll('.checkboxes')はすべてのチェックボックスを次の形式で取得します。

var newObj = { 
    stepOne: [ 
     { 
     name: 'one', 
     parentNode: { 
      id: 'stepOne' 
     } 
     }, 
     { 
     name: 'three', 
     parentNode: { 
      id: 'stepOne' 
     } 
     }, 
    ], 
    stepTwo: [ 
     { 
     name: 'two', 
     parentNode: { 
      id: 'stepTwo' 
     } 
     }, 
    ] 
} 

通常、私はこのような何かを：

var newObj = [ 
    { 
     name: 'one', 
     parentNode: { 
     id: 'stepOne' 
     } 
    }, 
    { 
     name: 'two', 
     parentNode: { 
     id: 'stepTwo' 
     } 
    }, 
    { 
     name: 'three', 
     parentNode: { 
     id: 'stepOne' 
     } 
    }, 
] 

新しいオブジェクトがあるべき

let stepOne = function(step) { 
    return step.parentNode.getAttribute('id') === 'stepOne'; 
} 

let stepTwo = function(step) { 
    return step.parentNode.getAttribute('id') === 'stepTwo'; 
} 

let allTheStepOnes = fetchCheckBoxes.filter(stepOne); 

をしかし、フィルタは、DOMオブジェクトでは動作しません、これは同様に非効率です。

Answer 1

現在の配列を新しい構造体に追加します。

return newObj.reduce(function(acc, item) { 

acc[item.parentNode.id]がこれまでに定義されている場合は、これを取得します。そうでない場合は空の配列に設定します。

acc[item.parentNode.id] = (acc[item.parentNode.id] || []) 

は、アレイにitemを追加して、それを返す：

acc[item.parentNode.id].push(item); 
return acc; 

我々が開始する{}としてアキュムレータを設定します。

---

動作を示すスニペット。

var newObj = [{ 
 
    name: 'one', 
 
    parentNode: { 
 
    id: 'stepOne' 
 
    } 
 
}, { 
 
    name: 'two', 
 
    parentNode: { 
 
    id: 'stepTwo' 
 
    } 
 
}, { 
 
    name: 'three', 
 
    parentNode: { 
 
    id: 'stepOne' 
 
    } 
 
}, ]; 
 

 
var newOrder = function(prevList) { 
 
     return prevList.reduce(function(acc, item) { 
 
      acc[item.parentNode.id] = (acc[item.parentNode.id] || []) 
 
      acc[item.parentNode.id].push(item); 
 
      return acc; 
 
     }, {}); 
 
    } 
 
    
 
console.log(newOrder(newObj));

Answer 2

この機能は、トリックを行う必要があり、これを行うの

function mapObj(obj) { 
    var result = {}; 
    for(var i = 0; i < obj.length; i++) { 
     var e = obj[i]; 
     result[e.parentNode.id] = result[e.parentNode.id] || []; 
     result[e.parentNode.id].push(e); 
    } 
    return result; 
} 

Answer 3

適切な方法がforEachループであり、このような連想配列を使用して：私たちは減らすことができますreduceを使用

let newObject = {}; 

originalObject.forEach((item)=>{ 
    let step = item.parentNode.id 
    if (newObj[step] === undefined) { 
     newObj[step] = [] 
    } 
    newObj[step].push(item) 
})