Iterate over objects and return key-value pairs from an array in 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

The generateRandomUser function expects the consumeAPI function to return a user, but it doesn't. — Guffa
– Guffa, Commented Nov 1, 2021 at 14:29
@ABDULLOKHMUKHAMMADJONOV Illuminate\Support\Collection {#1237 ▼ #items: array:4 [▼ 0 => array:8 [▼ "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" ] 1 => array:8 [▶] 2 => array:8 [▶] 3 => array:8 [▶] ] } — Raj
– Raj, Commented Nov 1, 2021 at 14:37

silencedogood · Accepted Answer · 2021-11-01 15:07:20Z

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.

edited Nov 1, 2021 at 15:07

answered Nov 1, 2021 at 14:33

silencedogood

3,3291 gold badge16 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Raj Over a year ago

Thanks, I tried iterating using different array methods but it always returns the first value pair of each Object. Can show an example of what do you mean by iterating as needed?

silencedogood Over a year ago

@Raj I edited with a potential solution... Although it's unclear exactly what you're attempting. Perhaps this will help.

Raj Over a year ago

I am trying to achieve something like this with dynamic data from the backend. jsfiddle.net/zxnf129u I will update my original post with this.

silencedogood Over a year ago

@Raj It's clear that you are making a call to grab some data... Your issues remain the same.

Ballo Adam · Accepted Answer · 2021-11-01 14:46:14Z

0

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.

answered Nov 1, 2021 at 14:46

Ballo Adam

1051 silver badge9 bronze badges

1 Comment

Raj Over a year ago

Thanks for your input, to be clear I am trying to achieve something like this jsfiddle.net/zxnf129u with dynamic data from the backend.

Raj · Accepted Answer · 2021-11-09 06:21:30Z

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

Learnings:

Move the incoming backend response out from consumeAPI()
Pop-out values of each object from it.
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

Collectives™ on Stack Overflow

Iterate over objects and return key-value pairs from an array in Javascript

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related