Martin AJ
Martin AJ

Reputation: 6697

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

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 },
.
.
.

Upvotes: 0

Views: 77

Answers (7)

amiramw
amiramw

Reputation: 506

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

Upvotes: 0

afdggfh
afdggfh

Reputation: 135

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;

Upvotes: 0

Tomas Randus
Tomas Randus

Reputation: 2285

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

Upvotes: 0

Gorka Hernandez
Gorka Hernandez

Reputation: 3958

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

Upvotes: 1

Pankaj Shukla
Pankaj Shukla

Reputation: 2672

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

Upvotes: 0

kind user
kind user

Reputation: 41893

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

Upvotes: 5

Egor Stambakio
Egor Stambakio

Reputation: 18136

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))

Upvotes: 3

Related Questions