JavaScript Array not indexing properly?

Question

var graphdata = [["A", "B", "C", "D"], [0.5, 0.25, 0.5, 0.25]];

function randomData (){
    var labels = graphdata[0]
    var labels2 = graphdata[1];
    console.log();
    return labels.map(function(labels, labels2){
        console.log(labels2);
        return { label: labels , value: labels2 }
    });
}

labels iterates correctly for A, B, C, D. but labels2 gets squashed to 0, 1, 2, 3, and I am not sure why. Right before the return labels.map() call, if I console.log(), I can get the properly fractions to output but after that those values disappear and I am not sure why.

Denys Séguret · Accepted Answer · 2017-07-27 20:07:03Z

4

The second argument given to the map callback is the index of the element in the iteration.

It looks like what you want would be

return labels.map(function(label, i){
    return { label: label , value: labels2[i] }
});

answered Jul 27, 2017 at 20:07

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

Comments

Roman · Accepted Answer · 2017-07-27 20:10:30Z

2

The Array.map() takes a callback with the parameters for the current Element, current index (optional) and the original array (optional).

randomArray.map(function(currentElement, currentIndex, randomArrayAgain) { /*...*/})

You could do:

labels.map(function(label, index) {
    return { label: label, value: labels2[index] }
});

Explanaion

map() will iterate over labels and in each iteration you have access to the current label and index. This solution works only when your arrays are sorted in the right way.

answered Jul 27, 2017 at 20:10

Roman

5,2503 gold badges25 silver badges33 bronze badges

Comments

Srishan Supertramp · Accepted Answer · 2017-07-27 20:12:50Z

1

Please read the documentation of map here. The callback to the map function takes two parameters, first being each item in the list that is to be iterated over, and second the index or key of that item in the list. The labels2 variable in your map callback doesn't refer to the one you created, it refers to the index of the item being mapped upon. Your implementation can be written as follows and it would be the same.

labels.map(function(eachLabel, key) {
    console.log(key); // 0, 1, 2, 3... (label.length - 1)
    return { label: eachLabel , value: key }
  });

edited Jul 27, 2017 at 20:12

answered Jul 27, 2017 at 20:10

Srishan Supertramp

3931 silver badge9 bronze badges

1 Comment

Denys Séguret Over a year ago

(you mean the documentation, not the implementation)

Mark · Accepted Answer · 2017-07-27 20:07:31Z

0

map() doesn't work this way.

The second parameter to map() is the index of the element it is currently looking at. So each time through it sets the first parameter labels to the element from labels that it's currently mapping the sets labels2 to the index of labels.

Here's more: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

answered Jul 27, 2017 at 20:07

Mark

92.7k8 gold badges116 silver badges156 bronze badges

Collectives™ on Stack Overflow

JavaScript Array not indexing properly?

4 Answers 4

Comments

Explanaion

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Explanaion

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related