Reputation: 6697
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
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
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
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
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
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
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
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