Javascript for loop to add multiple items

Question

My end goal is an array something like the one below:

let nodes_data =  [
    {"id": "A", "depth": 1, "x":50, "y":100},
    {"id": "B", "depth": 2, "x":150, "y":200},
    {"id": "C", "depth": 2, "x":250, "y":200},
    {"id": "D", "depth": 3, "x":350, "y":300},
]

However, I am only starting with an id and depth, and I would like to calculate the x and y separately.

So, given the starting source array of:

let nodes_data =  [
    {"id": "A", "depth": 1},
    {"id": "B", "depth": 2},
    {"id": "C", "depth": 2},
    {"id": "D", "depth": 3},
]

I tried to do a for loop to add to the array:

 function presetCoordinates(data){
 let nodes = [];
  for ( let i = 0; i< nodes_data.length; i++) {
    y = data[i].depth*100;
    x = (i*100) + 50;

    nodes.push(x, y)
  }
  return nodes;
}

let nodes_with_coords = presetCoordinates(nodes_data)
console.log(nodes_with_coords)

Where nodes_with_coords is my "goal" array.

but I'm getting some really strange results. Any thoughts on what I'm missing here? I think maybe I'm over-complicating this.

Use professional language please...

user202729
– user202729

2018-11-19 05:53:16 +00:00
Commented Nov 19, 2018 at 5:53 — user202729
– user202729, Commented Nov 19, 2018 at 5:53
What is the current result?

user202729
– user202729

2018-11-19 05:53:30 +00:00
Commented Nov 19, 2018 at 5:53 — user202729
– user202729, Commented Nov 19, 2018 at 5:53

Ori Drori · Accepted Answer · 2018-11-19 05:53:29Z

1

You don't include the original object:

function presetCoordinates(data) {
  let nodes = [];
  for (let i = 0; i < nodes_data.length; i++) {
    y = data[i].depth * 100;
    x = (i * 100) + 50;
    
    // include the contents of the original node using spread
    nodes.push({ ...data[i], x, y }) 
  }
  return nodes;
}

let nodes_data =  [
    {"id": "A", "depth": 1},
    {"id": "B", "depth": 2},
    {"id": "C", "depth": 2},
    {"id": "D", "depth": 3},
]

let nodes_with_coords = presetCoordinates(nodes_data)
console.log(nodes_with_coords)

answered Nov 19, 2018 at 5:53

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

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

Comments

Nitish Narang · Accepted Answer · 2018-11-19 05:55:06Z

0

You can use "Array.map" for this like below.

What map does is, it loops over every element in "nodes_data" and returns new object/array/{whatever} you need, in your case new object with more data.

let nodes_data =  [
    {"id": "A", "depth": 1},
    {"id": "B", "depth": 2},
    {"id": "C", "depth": 2},
    {"id": "D", "depth": 3},
]

let res = nodes_data.map((d, i) => ({...d, x: i * 100 + 50, y: d.depth * 100 }))

console.log(res)

answered Nov 19, 2018 at 5:55

Nitish Narang

4,2042 gold badges17 silver badges22 bronze badges

Comments

Narendra Jadhav · Accepted Answer · 2018-11-19 06:07:57Z

0

You could also use reduce() to get the required result.

Demo

const nodes_data =  [
    {"id": "A", "depth": 1},
    {"id": "B", "depth": 2},
    {"id": "C", "depth": 2},
    {"id": "D", "depth": 3},
];

let i = 0;

let result = nodes_data.reduce((r, o) => {
  let x = i + 50,
    y = i + 100;
  i = y;
  return [...r, Object.assign({},o,{x,y})];
}, []);

console.log(result);

.as-console-wrapper {max-height: 100% !important;top: 0;}

edited Nov 19, 2018 at 6:07

answered Nov 19, 2018 at 5:59

Narendra Jadhav

10.3k15 gold badges35 silver badges45 bronze badges

Comments

Azad · Accepted Answer · 2018-11-19 06:10:20Z

0

use Array.map it simply straight forward

function presetCoordinates(arr){
    return arr.map(function(data, idx){

        data.x = (idx * 100) + 50; 
        data.y = data.depth * 100; 
        return data;        
    });
}

var nodes_data =  [
    {"id": "A", "depth": 1},
    {"id": "B", "depth": 2},
    {"id": "C", "depth": 2},
    {"id": "D", "depth": 3},
];

let nodes_with_coords = presetCoordinates(nodes_data)
console.log(nodes_with_coords)

answered Nov 19, 2018 at 6:10

Azad

5,2725 gold badges31 silver badges59 bronze badges

Collectives™ on Stack Overflow

Javascript for loop to add multiple items

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related