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

mxr7350
– mxr7350

2017-04-28 14:02:35 +00:00
Commented Apr 28, 2017 at 14:02 — mxr7350
– mxr7350, Commented Apr 28, 2017 at 14:02

kind user · Accepted Answer · 2017-04-28 14:05:09Z

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, 2017 at 14:05

answered Apr 28, 2017 at 14:01

kind user

42k8 gold badges69 silver badges78 bronze badges

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

1 Comment

dashton Over a year ago

Out of interest, why is the Object.assign() used here?

Egor Stambakio · Accepted Answer · 2017-04-28 14:03:12Z

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, 2017 at 14:03

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Comments

Gorka Hernandez · Accepted Answer · 2017-04-28 14:06:04Z

1

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

answered Apr 28, 2017 at 14:06

Gorka Hernandez

3,96825 silver badges29 bronze badges

Comments

Pankaj Shukla · Accepted Answer · 2017-04-28 14:05:57Z

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, 2017 at 14:05

Pankaj Shukla

2,6722 gold badges13 silver badges18 bronze badges

Comments

Tomas Randus · Accepted Answer · 2017-04-28 14:12:09Z

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, 2017 at 14:12

answered Apr 28, 2017 at 14:05

Tomas Randus

2,3254 gold badges32 silver badges40 bronze badges

Comments

afdggfh · Accepted Answer · 2017-04-28 14:18:59Z

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, 2017 at 14:18

answered Apr 28, 2017 at 14:06

afdggfh

1359 bronze badges

Comments

amiramw · Accepted Answer · 2017-04-28 14:24:07Z

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, 2017 at 14:24

amiramw

5162 silver badges10 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related