How can I make a JS object from a JS array?

Question

I have this code which draws a chart: (the needed library is included)

<script type="text/javascript">

    window.onload = function () {
        var chart = new CanvasJS.Chart("chartContainer", {
            theme: "theme2",//theme1
            title:{
                text: "Basic Column Chart - CanvasJS"
            },
            animationEnabled: true,   // change to true
            data: [
                {
                    // Change type to "bar", "area", "spline", "pie",etc.
                    type: "column",
                    dataPoints: [
                        { label: "apple",  y: 10  },
                        { label: "orange", y: 15  },
                        { label: "banana", y: 25  },
                        { label: "mango",  y: 30  },
                        { label: "grape",  y: 28  }
                    ]
                }
            ]
        });
        chart.render();
    }
</script>

All fine. those inputs are as test. Now I need to make my real inputs. I have two JS arrays like these:

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

Does anybody how can I make something like below from my two arrays?

{ label: "John",  y: 10  },
{ label: "Jack",  y: 585 },
{ label: "Ali",  y: 563 },
.
.
.

Possible duplicate of [Convert Array to Object](http://stackoverflow.com/questions/4215737/convert-array-to-object) — mxr7350, Apr 28 '17 at 14:02

kind user · Answer 1 · 2017-04-28T14:05:09.273

5

Possible solution using Array#map. I assume that both arrays have the same length.

var numbers = [10, 585, 563, 24, 4, 486, 123, 458],
    names = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'],
    res = names.map((v,i) => Object.assign({}, {label: v, y: numbers[i]}));
    
    console.log(res);

edited Apr 28 '17 at 14:05

answered Apr 28 '17 at 14:01

kind user

40,029
7
67
77

Out of interest, why is the Object.assign() used here? – dashton Apr 28 '17 at 15:19

score 3 · Answer 2 · answered Apr 28 '17 at 14:03

3

const numbers = [10, 585, 563, 24, 4, 486, 123, 458];
const names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

const r = names.map((x,i) => { return {label: x, y: numbers[i]}})

console.log(JSON.stringify(r, null, 2))

answered Apr 28 '17 at 14:03

Egor Stambakio

17,836
5
33
35

score 1 · Answer 3 · answered Apr 28 '17 at 14:06

In case you are unfamiliar with the ECMAScript 6 versions answered above, you can use this slightly outdated syntax as well:

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

var result = names.map(function(value, index) {
    return { label: value, y: numbers[index] };
});

Tomas Randus · Answer 4 · 2017-04-28T14:12:09.417

0

Or shorter version:

var numbers = [10, 585, 563, 24, 4, 486, 123, 458],
names = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'],
res = names.map((v,i) => ({label: v, y: numbers[i]}));

console.log(res);

edited Apr 28 '17 at 14:12

answered Apr 28 '17 at 14:05

Tomas Randus

2,127
4
29
38

score 0 · Answer 5 · answered Apr 28 '17 at 14:05

0

You can do this:

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'];

var res = names.map((val,i)=>{
  return {label:val, y:numbers[i]};
});
console.log(res);

answered Apr 28 '17 at 14:05

Pankaj Shukla

2,657
2
11
18

afdggfh · Answer 6 · 2017-04-28T14:18:59.827

0

var numbers = [10, 585, 563, 24, 4, 486, 123, 458];
var names   = ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter']

var obj = []

for (var i in names) {
    obj[names[i]] = numbers[i];
}

Edit: Nevermind, should have read the question more thoroughly. I thought you wanted to be able to address the integer values as such:

obj.John == 10;

edited Apr 28 '17 at 14:18

answered Apr 28 '17 at 14:06

afdggfh

135
9

score 0 · Answer 7 · answered Apr 28 '17 at 14:24

0

Using lodash could be more readable:

_.zipWith([10, 585, 563, 24, 4, 486, 123, 458],
        ['John', 'Jack', 'Ali', 'martin', 'ejy', 'Farid', 'Gordon', 'Peter'], 
        (y, label) => {label: label, y: y});

answered Apr 28 '17 at 14:24

amiramw

506
2
10

How can I make a JS object from a JS array?

7 Answers7