• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

160
Vistas
Iterar sobre objetos y devolver pares clave-valor de una matriz en Javascript

Estoy tratando de iterar sobre un objeto JSON y devolver valores a otra función.

ingrese la descripción de la imagen aquí

Me gustaría pasar cada valor de quadrant1_x , quadrant1_y ... quadrant4_y de su objeto respectivo a la función calculatePlot() . Pero me sale un error Uncaught TypeError: user is undefined

Javascript se ve así:

 function generateRandomUser() { const user = consumeAPI() return calculatePlot(user) } function consumeAPI() { const graphs = @json($graphs); //received from the backend (Laravel) for (let i = 0; i < graphs.length; i++) { graphs.forEach((value, key) => { console.log([key, value]); return { x1: (value.quadrant1_x * range), y1: (value.quadrant1_y * range), x2: (value.quadrant2_x * range), y2: (value.quadrant2_y * range), x3: (value.quadrant3_x * range), y3: (value.quadrant3_y * range), x4: (value.quadrant4_x * range), y4: (value.quadrant4_y * range), } }) } function calculatePlot(user) { return [{ x: center + user.x1, y: center - user.y1 }, { x: center + user.x2, y: center - user.y2 }, { x: center + user.x3, y: center - user.y3 }, { x: center + user.x4, y: center - user.y4 }] } for (let i = 0; i < maxUsers; i++) { let plot = generateRandomUser(); let label = `Mid-point`; addUser(plot, label); calculateMidPoint(plot); }

Este código está generando un diagrama cartesiano como un SVG. Por lo tanto, se requiere cada valor de cuadrante de x e y para representar un gráfico.

Muestra: JSFiddle

almost 3 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

Parece que tu método consumeAPI no devuelve nada. Entonces, cuando lo invoca, el valor no está definido.

Además, no tiene sentido poner un bucle forEach dentro del bucle for que itera sobre el mismo iterable...

No estoy seguro de por qué está iterando dentro de la API de consumo. De hecho, no está claro por qué está iterando en absoluto.

Intenta devolver tus valores:

 async function consumeAPI() { // This will probably require async/await. const graphs = await @json($graphs); return graphs; }

Usar un bucle dentro de generateRandomUser no sería lógico, porque parece que su objetivo es obtener un usuario aleatorio. Si desea obtener un usuario aleatorio (elemento en la matriz), puede intentar algo como esto:

 function generateRandomUser() { const users = consumeAPI() var randomItem = users[Math.floor(Math.random()*users.length)] return users[randomItem]; }

Estoy pensando que todos los bucles adicionales y todo eso no son necesarios.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

Poner el retorno dentro de un forEach simplemente saldrá del bucle y no devolverá nada. Esta es la razón por la que consumeAPI devuelve undefined . Como mencionó @silencedogood, no hay necesidad de un forEach dentro del for loop .

Puede usar Array.map como alternativa y transformar cada objeto dentro de la matriz en caso de que haya más objetos que deban manejarse.

Si graphs es una matriz de objetos que desea transformar, simplemente puede hacer: graphs.map(graph => {x1: graph.quadrant1_x * range ....}); y devolver la matriz transformada.

almost 3 years ago · Juan Pablo Isaza Denunciar

0

De acuerdo, después de pasar un tiempo con los conceptos básicos, me di cuenta de que era bastante sencillo.

Aprendizajes:

  1. Mueva la respuesta de back-end entrante fuera de consumaAPI()
  2. Valores emergentes de cada objeto de él.
  3. Devuelve el Objeto a la función de calcularPlot().

Así que ahora consumeAPI() se ve así.

 function consumeAPI() { const value = sample_graphs.pop(); const x_1 = value.quadrant1_x; const y_1 = value.quadrant1_y; const x_2 = value.quadrant2_x; const y_2 = value.quadrant2_y; const x_3 = value.quadrant3_x; const y_3 = value.quadrant3_y; const x_4 = value.quadrant4_x; const y_4 = value.quadrant4_y; let retObj = { x1: x_1 * range, y1: y_1 * range, x2: x_2 * range, y2: y_2 * range, x3: x_3 * range, y3: y_3 * range, x4: x_4 * range, y4: y_4 * range, }; return retObj; }

El resto sigue igual.

 function generateRandomUser() { const user = consumeAPI(); return calculatePlot(user); } let sample_graph = [ { quadrant1_x: "0.17", quadrant2_x: "0.53", quadrant3_x: "-0.48", quadrant4_x: "-0.86", quadrant1_y: "0.31", quadrant2_y: "-0.21", quadrant3_y: "-0.60", quadrant4_y: "0.50", }, ... ]; // consumeAPI() goes here for (let i = 0; i < maxUsers; i++) { let plot = generateRandomUser(); addUser(plot); calculateMidPoint(plot); }

Muestra: JSFiddle

almost 3 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 Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda