Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

158
Vistas
¿Cómo convertir objetos de datos JSON en datos de la serie Highcharts?

Tengo un objeto de datos JSON y sus necesidades para convertir en datos de la serie Highcharts, probé mucho con mi conocimiento mínimo en JS, pero no puedo,

Objeto JSON:

 [ { "actionId": "fd799109-7cfd-489b-acce-28e2b538258e", "actionName": "Stand", "withInteraction": 1.4, "withoutInteraction": 1.2, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": 0, "neck": 2 }, { "actionId": "a64eee9f-3b71-4335-a4cd-b62cf1e4e270", "actionName": "Walk", "withInteraction": 1.4, "withoutInteraction": 1.2, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": null, "neck": null }, { "actionId": "9ca31804-0084-4bd5-8bfc-32f8a99c1c22", "actionName": "Bend", "withInteraction": 2.4, "withoutInteraction": 2.7, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": 0, "neck": 2 }, { "actionId": "08f4d687-436b-4faa-9d4f-0c4fe77f7ac7", "actionName": "Move", "withInteraction": 1.4, "withoutInteraction": 1.2, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": 0, "neck": 2 } ]

Los datos anteriores deben convertirse para ser como a continuación

 series: [ { name: 'knee', data: [2.4, 2.4, 2.4, 2.4], color : '#78e08f' }, { name: 'leg', data: [0,null,0,0], color : '#c23616' }, {...} ]

Por favor, ayúdenme a solucionar esto, gracias de antemano.

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

Si crea matrices de los nombres de las series de datos (obteniendo todas las claves del primer objeto que son valores de datos) y los colores que desea asignar a esas series, puede iterar las claves y filtrar los datos requeridos del devolvió datos json (que asumí que ha analizado en un objeto JavaScript):

 const keys = Object.keys(jsondata[0]).filter(k => !["actionId", "actionName"].includes(k)) const colours = keys.map((_) => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`) const result = { series: keys.map((key, i) => ({ name: key, data: jsondata.map(o => o[key]), color: colours[i] })) } console.log(result)
 <script type="text/javascript"> const jsondata = [{ "actionId": "fd799109-7cfd-489b-acce-28e2b538258e", "actionName": "Stand", "withInteraction": 1.4, "withoutInteraction": 1.2, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": 0, "neck": 2 }, { "actionId": "a64eee9f-3b71-4335-a4cd-b62cf1e4e270", "actionName": "Walk", "withInteraction": 1.4, "withoutInteraction": 1.2, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": null, "neck": null }, { "actionId": "9ca31804-0084-4bd5-8bfc-32f8a99c1c22", "actionName": "Bend", "withInteraction": 2.4, "withoutInteraction": 2.7, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": 0, "neck": 2 }, { "actionId": "08f4d687-436b-4faa-9d4f-0c4fe77f7ac7", "actionName": "Move", "withInteraction": 1.4, "withoutInteraction": 1.2, "knee": 2.4, "arm": 2.3, "trunk": 0, "leg": 0, "neck": 2 } ] </script>

about 4 years ago · Juan Pablo Isaza Denunciar

0

Puede usar el enfoque de agrupación hash, con asignación lógica nula (??=)

 const data = [{"actionId":"fd799109-7cfd-489b-acce-28e2b538258e","actionName":"Stand","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2},{"actionId":"a64eee9f-3b71-4335-a4cd-b62cf1e4e270","actionName":"Walk","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":null,"neck":null},{"actionId":"9ca31804-0084-4bd5-8bfc-32f8a99c1c22","actionName":"Bend","withInteraction":2.4,"withoutInteraction":2.7,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2},{"actionId":"08f4d687-436b-4faa-9d4f-0c4fe77f7ac7","actionName":"Move","withInteraction":1.4,"withoutInteraction":1.2,"knee":2.4,"arm":2.3,"trunk":0,"leg":0,"neck":2}]; const reservedlKeys = ["actionId","actionName"]; const getColor = (key) => '#000000'; const groups = data.reduce((acc, item) => { Object.entries(item).forEach(([key, value]) => { if (!reservedlKeys.includes(key)) { acc[key] ??= { name: key, data: [], color: getColor(key) }; acc[key].data.push(value); } }); return acc; }, {}); const series = Object.values(groups); console.log(series)
 .as-console-wrapper { max-height: 100% !important; top: 0 }

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda