遍历对象并从 Javascript 中的数组返回键值对

Question

I am trying to iterate over a JSON object and return values to another function.

I would like to pass each value of quadrant1_x , quadrant1_y ... quadrant4_y of its respective object to the calculatePlot() function. But I get an error Uncaught TypeError: user is undefined

Javascript looks like this:

 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); }

This code is generating a cartesian plot as an SVG. So, each quadrant value of x & y is required in order to render a graph.

Sample : JSFiddle

Answer 1

Looks like you're consumeAPI method doesn't return anything. So when you invoke it, the value is undefined.

Also, there is no point in putting a forEach loop inside of the for loop that iterates over the same iterable...

Not sure why you're iterating within the consume api. In fact, it's unclear why you're iterating at all.

Try returning your values:

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

Using a loop inside generateRandomUser wouldn't be logical, because it seems your goal is to get a random user. If you'd like to get a random user (item in the array), you could try something like this:

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

   return users[randomItem];
}

I'm thinking all the extra loops and whatnot aren't necessary.

Answer 2

Putting the return inside of a forEach will simply break out of the loop and not return anything. This is why consumeAPI returns undefined . As @silencedogood mentioned, there is no need for a forEach inside of the for loop .

You can use Array.map as an alternative and transform each object inside of the array in case there are more objects that need to be handled.

If graphs is an array of objects that you wish to transform, you can simply do: graphs.map(graph => {x1: graph.quadrant1_x * range ....}); and return the transformed array.

Answer 3

Okay, So after spending some time on basics I realized it was quite straightforward.

Learnings:

1. Move the incoming backend response out from consumeAPI()
2. Pop-out values of each object from it.
3. Return the Object to calculatePlot() function.

So now the consumeAPI() looks like this.

     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;
           
        }

Rest remains the same.

 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);
        }

Sample: JSFiddle