0
159
VistasIterar 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.
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
3 Respuestas
Responde la pregunta0
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.
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.
0
De acuerdo, después de pasar un tiempo con los conceptos básicos, me di cuenta de que era bastante sencillo.
Aprendizajes:
- Mueva la respuesta de back-end entrante fuera de consumaAPI()
- Valores emergentes de cada objeto de él.
- 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