Necesito que los datos se muestren como en la imagen:
Necesito que cada ciudad tenga una tabla individual, en donde se guarde la informacion, en el console log muestra todo agrupado ya que, en el json esta en desorden entonces el codigo se encarga de agrupar las personas por ciudad y agruparlas, entonces necesito ayuda para mostrar esos datos en tablas e intentado pero lo muestra individual y sin una tabla por ciudad
DATA FROM JSON
var data = [
{
Nombre: 'Fulano Detal',
Descripcion: 'Un string explicando a qué se dedica',
Ciudad: 'CIUDAD 1'
},
{
Nombre: 'Otro Fulano',
Descripcion: 'String diferente que tambien describe su trabajo',
Ciudad: 'CIUDAD 1'
},
{
Nombre: 'Tercer Fulano',
Descripcion: 'Su trabajo en donde sea que este',
Ciudad: 'CIUDAD 2'
}
]
<script>
let url = 'http://localhost:4000/apis/xd';
fetch(url)
.then( response => response.json() )
.then( data => mostrarData(data) )
.catch( error => console.log(error) )
const mostrarData = (data) => {
var nuevoArray = []
var arrayTemporal = []
for(var i=0; i<data.length; i++){
arrayTemporal = nuevoArray.filter(resp => resp["Nombre"] == data[i]["Ciudad"])
if(arrayTemporal.length>0){
nuevoArray[nuevoArray.indexOf(arrayTemporal[0])]["Profesionales"].push(data[i]["Nombre"])
}else{
nuevoArray.push({"Nombre" : data[i]["Ciudad"] , "Profesionales" : [data[i]["Nombre"]]})
console.log(nuevoArray)
}
}
}
</script>
Gracias, espero que puedan encontrar una solucion, estaria muy agradecido con ustedes.