Estoy trabajando con Firestore y aquí hay un problema que tengo.

Creé una colección de documentos y su estructura es así:

 const myArr = [ {title: 'title 1',name: '10 name',age: 10}, {title: 'title 2',name: '20 name',age: 20}, {title: 'title 2',name: '21 name',age: 20}, {title: 'title 2',name: '22 name',age: 20}, {title: 'title 3',name: '30 name',age: 30} ]

Necesitaba todos los títulos únicos, así que creé un conjunto:

 const unique = [...new Set(myArr.map(item => item.title))];

Los agregué a mi dom para que cada título único fuera un encabezado:

 let wrapper = document.querySelector('#main'); for(let i = 0; i < unique.length; i++) { let myDiv = document.createElement('div'); myDiv.className = 'unique_list'; wrapper.appendChild(myDiv); myDiv.innerHTML = `<h3 data-title="${unique[i]}">${unique[i]}</h3><br><br>`; }

Ahora necesito agregar a cada div "unique_list" también todos los objetos que son iguales a este título único para que cada contenedor se vea así:

 <div class="unique_list" data-title="title 2"> <h3>title 2</h3> <div> <p>name: 20 name</p> <p>age: 20</p> </div> <div> <p>name: 21 name</p> <p>age: 20</p> </div> <div> <p>name: 22 name</p> <p>age: 20</p> </div> </div>

Actualmente estoy atascado con bucles for anidados y no tengo idea de cómo lograr esto, agradecería mucho cualquier sugerencia, gracias.