Estoy devolviendo categorías de productos en función de los resultados de búsqueda y quiero enumerar todas las categorías de productos como una sola lista con los duplicados filtrados. Actualmente, estoy devolviendo algo como:

 item.productCategories

que devuelve una cadena de URLS, así:

 "<a href=\"https://test.local/product-category/guitar-pickups/\" rel=\"tag\">Guitar Pickups</a>, <a href=\"https://test.local/product-category/hum-cancelling/\" rel=\"tag\">Hum-Cancelling Pickups</a>

Luego los dividiré usando .split(",") y la siguiente expresión a continuación para enumerarlos en un literal de plantilla:

 `<ul> ${results["products"].map((item) => ` <li class="search-result">${item.productCategories .split(",") .map((category) => `<li>${category}</li>`) .join("")} </li>`)} </ul>`

Resultado:

Obtengo listas separadas de categorías así:

Lista 1:

• Categoría 1
• Categoría 3
• Categoría 2

Lista 2:

• Categoría 1
• Categoría 2

Me gustaría aplanar todas estas matrices, combinarlas en una matriz y luego filtrar los duplicados y devolver una sola matriz. No sé por dónde empezar a hacer esto en una Plantilla Literal. ¿Algunas ideas?

Actualizar:

Gracias a @Bergi, ahora puedo reducir todos los enlaces a una nueva matriz, pero estoy atascado deduplicando la matriz.

Código actualizado:

 <ul>${results.products.flatMap((item) => item.productCategories.split(", "))}</ul>

<ul>${results.products.flatMap((item) => item.productCategories.split(", ")).map((cat) => console.log([...new Set(cat)]))}</ul> pero eso convierte las cadenas individuales dentro de la matriz en sub-matrices

Lo siento, soy nuevo en los métodos de matriz. Cualquier ayuda es apreciada.