0

he intentado recorrer este JSON y guardarlo en array diferentes para poder agruparlo por nombre_servicio pero no lo he logrado, necesito de su ayuda si alguien sabe como, lo ideal seria poder agruparlo por nombre_servicio ya que hay algunos que se repiten.

rows: [
{
  id: 1123,
  nombre_servicio: 'ASISTENTE PRODUCCIÓN',
  nombre_valor: 'Jornada 8 horas',
  valor: '6000'
},
{
  id: 1124,
  nombre_servicio: 'ASISTENTE PRODUCCIÓN',
  nombre_valor: 'Jornada 12 horas',
  valor: '2000'
},
{
  id: 1125,
  nombre_servicio: 'PRODUCTOR EJECUTIVO',
  nombre_valor: 'Jornada 12 horas',
  valor: '4000'
},
{
  id: 1126,
  nombre_servicio: 'PRODUCTOR GENERAL',
  nombre_valor: 'Jornada 8 horas',
  valor: '50000'
},
{
  id: 1127,
  nombre_servicio: 'PRODUCTOR TÉCNICO',
  nombre_valor: 'Jornada 12 horas',
  valor: '7000'
}

]

Lo ideal seria poder recorrerlo y guardarlo en un array o agruparlo pero que quede esta manera o al menos similar:

rows: [
{
  id: 1123,
  nombre_servicio: 'ASISTENTE PRODUCCIÓN',
  values: [
    {
    nombre_valor: 'Jornada 8 horas',
    valor: '6000'
    },
    {
    nombre_valor: 'Jornada 12 horas',
    valor: '2000'
    },
  ]
},
{
  id: 1125,
  nombre_servicio: 'PRODUCTOR EJECUTIVO',
  values: [
    {
    nombre_valor: 'Jornada 8 horas',
    valor: '0'
    },
    {
    nombre_valor: 'Jornada 12 horas',
    valor: '4000'
    }
  ]
},
{
  id: 1126,
  nombre_servicio: 'PRODUCTOR GENERAL',
  values: [
    {
    nombre_valor: 'Jornada 8 horas',
    valor: '50000'
    },
    {
    nombre_valor: 'Jornada 12 horas',
    valor: '0'
    }
  ]
  
},
{
  id: 1127,
  nombre_servicio: 'PRODUCTOR TÉCNICO',
  values: [
    {
    nombre_valor: 'Jornada 8 horas',
    valor: '0'
    },
    {
    nombre_valor: 'Jornada 12 horas',
    valor: '7000'
    }
  }
  
}

]

Soy principiante en el mundo de javascript y les agradeceria mucho si me ayudan con esto, quizás no es posible?

He intentado hacerlo con javascript pero nada, no hay resultado.

Dejo una de mis pruebas fracadas.

let data = [
    {
      id: 1123,
      nombre_servicio: 'ASISTENTE PRODUCCIÓN',
      nombre_valor: 'Jornada 8 horas',
      valor: '6000'
    },
    {
      id: 1124,
      nombre_servicio: 'ASISTENTE PRODUCCIÓN',
      nombre_valor: 'Jornada 12 horas',
      valor: '2000'
    },
    {
      id: 1125,
      nombre_servicio: 'PRODUCTOR EJECUTIVO',
      nombre_valor: 'Jornada 12 horas',
      valor: '4000'
    },
    {
      id: 1126,
      nombre_servicio: 'PRODUCTOR GENERAL',
      nombre_valor: 'Jornada 8 horas',
      valor: '50000'
    },
    {
      id: 1127,
      nombre_servicio: 'PRODUCTOR TÉCNICO',
      nombre_valor: 'Jornada 12 horas',
      valor: '7000'
    }

]

let values = []
let new_data = []
let valuesmask = {}
let name_service = ''
data.forEach(val => {
  if(name_service !== val.nombre_servicio){
      console.log(val.nombre_servicio)
      valuesmask = {
        nombre_valor: val.nombre_valor,
        valor: val.valor
      }
      values.push(valuesmask)
  }

  name_service = val.nombre_servicio

})

new_data.push(values)

console.log(new_data)

1
  • 1
    La propiedad id no debería estar dentro de values? porque hay distintos ids en nombre_servicio iguales.
    – Emeeus
    el 4 ago. 2022 a las 1:29

2 respuestas 2

1

Puedes transformar el arreglo mediante un reduce, este método itera el arreglo y devuelve un valor transformado según se indique en la función de transformación (callback).

Para este caso se puede crear un arreglo en donde se identifique via findIndex si el servicio ya fue agregado, si lo encuentra solo agrega a los values el valor de la iteración actual para nombre_valor y valor; en caso de que no exista se crea un nuevo objeto en el arreglo con la representación del servicio y valor en el formato en el que se requiere.

let data = [
    {
      id: 1123,
      nombre_servicio: 'ASISTENTE PRODUCCIÓN',
      nombre_valor: 'Jornada 8 horas',
      valor: '6000'
    },
    {
      id: 1124,
      nombre_servicio: 'ASISTENTE PRODUCCIÓN',
      nombre_valor: 'Jornada 12 horas',
      valor: '2000'
    },
    {
      id: 1125,
      nombre_servicio: 'PRODUCTOR EJECUTIVO',
      nombre_valor: 'Jornada 12 horas',
      valor: '4000'
    },
    {
      id: 1126,
      nombre_servicio: 'PRODUCTOR GENERAL',
      nombre_valor: 'Jornada 8 horas',
      valor: '50000'
    },
    {
      id: 1127,
      nombre_servicio: 'PRODUCTOR TÉCNICO',
      nombre_valor: 'Jornada 12 horas',
      valor: '7000'
    }

]

let grouped = data.reduce((acc, current) => {
  // Encontrar la posición de este servicio en el nuevo arreglo
  let position = acc.findIndex(a => a.nombre_servicio === current.nombre_servicio)
   
  // Si no existe entonces crear una nueva entrada en el arreglo.
  if (position < 0) {
    acc.push({
      id: current.id,
      nombre_servicio: current.nombre_servicio,
      values: [
      {
        nombre_valor: current.nombre_valor,
        valor: current.valor
      }]
    })
  } else {  // Caso contrario solo agregar el valor actual a la colección values
    acc[position].values.push({
        nombre_valor: current.nombre_valor,
        valor: current.valor
    })
  }
 
  return acc
}, []) // inicializa el valor de retorno como arreglo vacío)

console.log(grouped)

1
  • Gracias maestro! muy util, admiro su trabajo! el 4 ago. 2022 a las 2:52
0

Al ser un arreglo de objetos, puedes ciclar a través de un for o foreach para comparar y agrupar o puedes utilizar el método reduce de JavaScript, el cual ejecuta una función reductora sobre cada elemento de un array, devolviendo como resultado un único valor. Referencia reduce

En este ejemplo cree una función, en donde se pide como parámetros un arreglo y una llave o en este caso una propiedad del objeto para poder agrupar.

Después de haber agrupado, ciclamos nuestro arreglo de arreglos es decir: var arr=[ [ {},{}], [ {},{}], ] por cada arreglo lo reemplazamos con un objeto y así mismo lo agregamos en una de las propiedades del objeto, podemos utilizar sort para ordenar y para identificar cada agrupamiento tomamos el primero propiedad del primer objeto ya que esta propiedad se repetirá en todos los demás. Saludos!

var datos = [
    {
        id: 1123,
        nombre_servicio: 'ASISTENTE PRODUCCIÓN',
        nombre_valor: 'Jornada 8 horas',
        valor: '6000'
    },
    {
        id: 1124,
        nombre_servicio: 'ASISTENTE PRODUCCIÓN',
        nombre_valor: 'Jornada 12 horas',
        valor: '2000'
    },
    {
        id: 1125,
        nombre_servicio: 'PRODUCTOR EJECUTIVO',
        nombre_valor: 'Jornada 12 horas',
        valor: '4000'
    },
    {
        id: 1126,
        nombre_servicio: 'PRODUCTOR GENERAL',
        nombre_valor: 'Jornada 8 horas',
        valor: '50000'
    },
    {
        id: 1127,
        nombre_servicio: 'PRODUCTOR TÉCNICO',
        nombre_valor: 'Jornada 12 horas',
        valor: '7000'
    }
]


var datos_agrupados = groupBy(datos, 'nombre_servicio')

for (var i = 0; i < datos_agrupados.length; i++) {
    var values = datos_agrupados[i] 
    values = values.sort((a, b) => a.id - b.id)
    var values_specifics = values.map((object) => {
        return {
            nombre_valor: object.nombre_valor,
            valor: object.valor
        }
    });
    this.datos_agrupados[i] = {
        nombre_servicio: this.datos_agrupados[i][0].nombre_servicio,
        values: values_specifics
    }
}

console.log(datos_agrupados)



/**funcion de agrupar */
function groupBy(array, key) {
    return Array.from(array
        .reduce((m, o) => m.set(o[key], [...(m.get(o[key]) || []), o]), new Map)
        .values()
    );
}

5
  • Gracias por responder! pero veo que el resultado no cambia mucho al original, sera posible que "ASISTENTE PRODUCCION" aparezca una sola vez y con su correspondiente valor que seria 'Jornada 8 horas' y 'Jornada 12 horas' el 4 ago. 2022 a las 2:25
  • Si, permíteme actualizar el código, va el 4 ago. 2022 a las 2:28
  • 1
    vale gracias!!! el 4 ago. 2022 a las 2:32
  • Hola. me sale un error: TypeError: Cannot read properties of undefined (reading '0') at fs:/src/script.js (<anonymous>:82:49) at __require (<anonymous>:14:50) at <anonymous>:103:29 at hn (preview-new.playcode.io/:190:5449) el 4 ago. 2022 a las 2:47
  • Comparte por favor tu codigo el 4 ago. 2022 a las 4:37

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