0

Necesito que los datos se muestren como en la imagen:

not foud

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.

3
  • 1
    "Fulano Detal" por favor, estás en stack overflow en español. Traduce tu pregunta o terminará cerrada. ¡Bienvenido!
    – Jaime
    Commented el 18 may. 2022 a las 0:44
  • donde esta el html con la tabla que intentaste hacer? Commented el 18 may. 2022 a las 2:26
  • Creo que te sería mucho más sencillo aplicar un reduce al data, para agrupar por ciudades, y luego simplemente hacer una tabla por cada elemento.
    – maxpsz
    Commented el 18 may. 2022 a las 4:57

1 respuesta 1

0

Podrías hacer lo siguiente:

  • Usamos reduce para recorrer el arreglo de personas y obtener un nuevo arreglo de ciudades agrupadas por su nombre y las personas que viven allí.

    Ej: [{Nombre: 'Ciudad', Personas: [{...}]}, ...]
    
  • Creamos un objeto para guardar el nombre de la ciudad como clave (hashmap).

  • Al recorrer el arreglo de personas, si el nombre de la ciudad aún no esta en el hashmap, lo creamos y también lo agregamos al arreglo de resultado (acc).

  • Por último agregamos a la persona al objeto de la ciudad.

Ejemplo:

const mostrarData = (personas) => {
  let map = {};
  return personas.reduce((acc, persona) => {
    let c = persona.Ciudad;
    if (!map[c]) { // La ciudad no existe en el hashmap
      map[c] = {Nombre: c, Personas: []}; // Creamos el obj de la ciudad
      acc.push(map[c]) // Agregamos la ciudad al resultado
    }
    map[c].Personas.push(persona); // Agregamos la persona a la ciudad
    return acc;
  }, []);
}

///

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'
}]

let ciudades = mostrarData(data);
console.log(ciudades)

2
  • Como podría mostrar eso, en el html, agregando el hecho en que en un futuro abran muchas más ciudades y que todo se realize de forma automática, agradezco tu respuesta anterior? Commented el 18 may. 2022 a las 14:39
  • Hola @SPENTCRAFT, según entendí, tu pregunta inicial, era como modificar el JSON para agrupar las "personas" por "ciudad". ¿Es esta otra pregunta? ¿Que has intentado? Si necesitas una respuesta a un nuevo problema, tendrías que crear una nueva pregunta agregando el código que has desarrollado y no cumplio con tu objetivo.
    – Marcos
    Commented el 18 may. 2022 a las 15:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.