Related
const bankAccounts = [
{
id: 1,
name: "Susan",
balance: 100.32,
deposits: [150, 30, 221],
withdrawals: [110, 70.68, 120],
},
{ id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
{
id: 3,
name: "Joshua",
balance: 18456.57,
deposits: [4000, 5000, 6000, 9200, 256.57],
withdrawals: [1500, 1400, 1500, 1500],
},
{ id: 4, name: "Candy", balance: 0.0 },
{ id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];
function getAllWithdrawals(bankAccounts) {
let newArr = [];
for (let acc of bankAccounts) {
if (acc.withdrawals) {
newArr.push(acc.withdrawals)
} else if (!acc.withdrawals) {
newArr.push(0);
}
}
return newArr;
}
I am getting access to the array objects. But how do I get into the objects with the array of withdrawals with varying amounts, add them all and print that in the blank array "newArr"? Do I need another for loop? My overall goal is to iterate through the objects check which ones pass that have withdrawals array. If they do not have a withdrawals array I pass 0. The objects that do have withdrawals I need to iterate through those and add them up and push the total of the withdrawal array into the "newArr".
Here is a functional programming solution that uses map reduce:
const bankAccounts = [ { id: 1, name: "Susan", balance: 100.32, deposits: [150, 30, 221], withdrawals: [110, 70.68, 120], }, { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] }, { id: 3, name: "Joshua", balance: 18456.57, deposits: [4000, 5000, 6000, 9200, 256.57], withdrawals: [1500, 1400, 1500, 1500], }, { id: 4, name: "Candy", balance: 0.0 }, { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] }, ];
function getAllWithdrawals(bankAccounts) {
return bankAccounts.map(obj => {
return obj.withdrawals ? obj.withdrawals.reduce((sum, num) => sum + num, 0) : 0;
});
}
console.log(getAllWithdrawals(bankAccounts));
Output:
[
300.68,
0,
5900,
0,
100
]
Docs:
Intro to map reduce: https://medium.com/poka-techblog/simplify-your-javascript-use-map-reduce-and-filter-bd02c593cc2d
.map(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
.reduce(): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reduce
Here is an enhanced version where you pass the deposits or withdrawls key into the function:
const bankAccounts = [ { id: 1, name: "Susan", balance: 100.32, deposits: [150, 30, 221], withdrawals: [110, 70.68, 120], }, { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] }, { id: 3, name: "Joshua", balance: 18456.57, deposits: [4000, 5000, 6000, 9200, 256.57], withdrawals: [1500, 1400, 1500, 1500], }, { id: 4, name: "Candy", balance: 0.0 }, { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] }, ];
function getSums(bankAccounts, key) {
return bankAccounts.map(obj => {
return obj[key] ? obj[key].reduce((sum, num) => sum + num, 0) : 0;
});
}
console.log({
deposits: getSums(bankAccounts, 'deposits'),
withdrawals: getSums(bankAccounts, 'withdrawals'),
});
Output:
{
"deposits": [
401,
1100,
24456.57,
0,
118
],
"withdrawals": [
300.68,
0,
5900,
0,
100
]
}
UPDATE 1: Based on request to use only for loops:
const bankAccounts = [ { id: 1, name: "Susan", balance: 100.32, deposits: [150, 30, 221], withdrawals: [110, 70.68, 120], }, { id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] }, { id: 3, name: "Joshua", balance: 18456.57, deposits: [4000, 5000, 6000, 9200, 256.57], withdrawals: [1500, 1400, 1500, 1500], }, { id: 4, name: "Candy", balance: 0.0 }, { id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] }, ];
function getAllWithdrawals(bankAccounts) {
let result = [];
for (let obj of bankAccounts) {
let sum = 0;
if(obj.withdrawals) {
for (num of obj.withdrawals) {
sum += num;
}
}
result.push(sum);
}
return result;
}
console.log(getAllWithdrawals(bankAccounts));
Not sure if I understood your question, but if u have to sum ALL of the withdrawals you should do it in this way:
const bankAccounts = [
{
id: 1,
name: "Susan",
balance: 100.32,
deposits: [150, 30, 221],
withdrawals: [110, 70.68, 120],
},
{ id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
{
id: 3,
name: "Joshua",
balance: 18456.57,
deposits: [4000, 5000, 6000, 9200, 256.57],
withdrawals: [1500, 1400, 1500, 1500],
},
{ id: 4, name: "Candy", balance: 0.0 },
{ id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];
function getAllWithdrawals(bankAccounts) {
let newArr = [];
for (let acc of bankAccounts) {
if (!!acc.withdrawals) {
acc.withdrawals.forEach(withdrawal => newArr.push(withdrawal))
}
}
return newArr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
}
console.log(getAllWithdrawals(bankAccounts))
Otherwise if you have to sum the withdrawals of the single object you have to use this code:
const bankAccounts = [
{
id: 1,
name: "Susan",
balance: 100.32,
deposits: [150, 30, 221],
withdrawals: [110, 70.68, 120],
},
{ id: 2, name: "Morgan", balance: 1100.0, deposits: [1100] },
{
id: 3,
name: "Joshua",
balance: 18456.57,
deposits: [4000, 5000, 6000, 9200, 256.57],
withdrawals: [1500, 1400, 1500, 1500],
},
{ id: 4, name: "Candy", balance: 0.0 },
{ id: 5, name: "Phil", balance: 18, deposits: [100, 18], withdrawals: [100] },
];
function getAllWithdrawals(bankAccounts) {
let newArr = [];
for (let acc of bankAccounts) {
if (!!acc.withdrawals) {
newArr.push(acc.withdrawals.reduce((accumulator, currentValue) => accumulator + currentValue, 0))
}
}
return newArr;
}
console.log(getAllWithdrawals(bankAccounts))
I am trying to save react-seat-picker
https://github.com/roggervalf/react-seat-picker#readme
data into firestore and read it back.
The one piece of code describing data that should be written/saved to firestore is this:
const rows = [
[{id: 1, number: 1, isSelected: true, tooltip: 'Reserved by you'}, {id: 2, number: 2, tooltip: 'Cost: 15$'}, null, {id: 3, number: '3', isReserved: true, orientation: 'east', tooltip: 'Reserved by Rogger'}, {id: 4, number: '4', orientation: 'west'}, null, {id: 5, number: 5}, {id: 6, number: 6}],
[{id: 7, number: 1, isReserved: true, tooltip: 'Reserved by Matthias Nadler'}, {id: 8, number: 2, isReserved: true}, null, {id: 9, number: '3', isReserved: true, orientation: 'east'}, {id: 10, number: '4', orientation: 'west'}, null, {id: 11, number: 5}, {id: 12, number: 6}],
[{id: 13, number: 1}, {id: 14, number: 2}, null, {id: 15, number: 3, isReserved: true, orientation: 'east'}, {id: 16, number: '4', orientation: 'west'}, null, {id: 17, number: 5}, {id: 18, number: 6}],
[{id: 19, number: 1, tooltip: 'Cost: 25$'}, {id: 20, number: 2}, null, {id: 21, number: 3, orientation: 'east'}, {id: 22, number: '4', orientation: 'west'}, null, {id: 23, number: 5}, {id: 24, number: 6}],
[{id: 25, number: 1, isReserved: true}, {id: 26, number: 2, orientation: 'east'}, null, {id: 27, number: '3', isReserved: true}, {id: 28, number: '4', orientation: 'west'}, null,{id: 29, number: 5, tooltip: 'Cost: 11$'}, {id: 30, number: 6, isReserved: true}]
]
You can stringify your nested array (JSON.stringify(rows)) before storing in firestore and parse it after getting it back.
So far firebase firestore doesn't support nested arrays,you need to change the data structure.Have a look at this solution
I want to have highchart drilldown with more than 3 levels.
Also, I have tried referring below articles, but I was not able to figure out.
Drilldown multiple levels Highchart
Highcharts - drill down to multiple series
I could do only till 3 levels. After that, bar is not clickable.
Not sure where the mistake is, but this is what I have done so far.
2 Level Drill down - Works fine
Multilevel - Works only till Month level, cannot filter Day level
https://jsfiddle.net/foodiepanda/2ec7d6fz/9/
Below is code (only jquery)
/*Start*/
$('#chart1').highcharts({
chart: {type: 'column'},
title: {text: 'Multi Drilldown'},
xAxis: {type: 'category'},
legend: {enabled: false},
plotOptions:
{
series:
{
dataLabels:
{
enabled: true, //Shown at top of column
}
}
},
series:
[
{
name: 'Year',
//colorByPoint: false,
data:
[
{name: '2019',y: 200,drilldown: '2019'}, //200 clicks in 2018
{name: '2020',y: 450,drilldown: '2020'}, //450 clicks in 2019
]
}
],
drilldown:
{
series:
[
{
id: '2019', //For 2019
name: 'Quarter', //Splitting 200 as 50,100,20,30
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 20,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 30,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,30,20
data:
[
{
name: 'Jan',
y: 10,
drilldown: 'Jan'
},
{
name: 'Feb',
y: 30,
drilldown: 'Feb'
},
{
name: 'Mar',
y: 20,
drilldown: 'Mar'
}
]
},
{
id: 'Jan',
name: 'Day', //Splitting 10 as ...[days]
data:
[
{name:'1', y: 0},
{name:'2', y: 0},
{name:'3', y: 2},
{name:'4', y: 0},
{name:'5', y: 0},
{name:'6', y: 0},
{name:'7', y: 0},
{name:'8', y: 0},
{name:'9', y: 0},
{name:'10', y: 0},
{name:'11', y: 1},
{name:'12', y: 2},
{name:'13', y: 0},
{name:'14', y: 1},
{name:'15', y: 0},
{name:'16', y: 0},
{name:'17', y: 0},
{name:'18', y: 0},
{name:'19', y: 0},
{name:'20', y: 0},
{name:'21', y: 0},
{name:'22', y: 0},
{name:'23', y: 0},
{name:'24', y: 0},
{name:'25', y: 2},
{name:'26', y: 0},
{name:'27', y: 0},
{name:'28', y: 0},
{name:'29', y: 0},
{name:'30', y: 1},
{name:'31', y: 1}
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 80,10,10
data:
[
['Apr', 80],
['May', 10],
['Jun', 10]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 20 as 5,10,5
data:
[
['Jul', 5],
['Aug', 10],
['Sep', 5]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 30 as 5,15,10
data:
[
['Oct', 5],
['Nov', 15],
['Dec', 10]
]
},
//For 2020
{
id: '2020',
name: 'Quarter', //Splitting 450 as 50,100,50,250
data:
[
{
name: 'Q1',
y: 50,
drilldown: 'Q1'
},
{
name: 'Q2',
y: 100,
drilldown: 'Q2'
},
{
name: 'Q3',
y: 50,
drilldown: 'Q3'
},
{
name: 'Q4',
y: 250,
drilldown: 'Q4'
}
]
},
{
id: 'Q1',
name: 'Month', //Splitting 50 as 10,35,5
data:
[
['Jan', 10],
['Feb', 35],
['Mar', 5]
]
},
{
id: 'Q2',
name: 'Month', //Splitting 100 as 40,35,25
data:
[
['Apr', 40],
['May', 35],
['Jun', 25]
]
},
{
id: 'Q3',
name: 'Month', //Splitting 50 as 5,25,20
data:
[
['Jul', 5],
['Aug', 25],
['Sep', 20]
]
},
{
id: 'Q4',
name: 'Month', //Splitting 250 as 75,125,50
data:
[
['Oct', 75],
['Nov', 125],
['Dec', 50]
]
},
] //End Series
} //End Year Drilldown
}); //End Highchart function
//Explicitly change Y axis
var curChart = $('#chart1').highcharts();
curChart.yAxis[0].update({
title:{
text:"Number of Hits"
}
});
/*End*/
I was able to figure out what the issue was.
The name parameter and drilldown parameter were having same values.
I just renamed name parameter from 'Q1' to '_Q1' and it worked like a charm.
{
name: 'Q1',
y: 50,
drilldown: '_Q1'
}
Updated JSFiddle :
https://jsfiddle.net/foodiepanda/2ec7d6fz/11/
Problem: After switchnig to new (4.21) version of vis.js (from 4.18) my graph is all messed up.
EDIT: The change occurs between versions 4.19.1 and 4.20. I guess it has something to do with multiple changes in network introduced in the 4.20 version.
I'm building a family free. I spent some time to get a nice looking graph. Then I found out that new version of vis.js is available. Once I decided to use it, the edges of my graph started to cross.
Here's my nice-looking graph using 4.18.1:
Here's what happens if I change to 4.21.0:
What did I do wrong? How to fix this? Same data, same code. The only difference is:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
instead of
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
Here's the 4.18.1 fiddle and 4.21.0 fiddle.
And a full code with 4.21.0 reference below:
// create an array with nodes
var nodes = new vis.DataSet([
{id: 1, label: 'Person 1'},
{id: 2, label: 'Person 2'},
{id: 3, label: 'Person 3'},
{id: 4, label: 'Person 4'},
{id: 5, label: 'Person 5'},
{id: 6, label: 'Person 6'},
{id: 7, label: 'Person 7'},
{id: 8, label: 'Person 8'},
{id: 9, label: 'Person 9'},
{id: 10, label: 'Person 10'},
{id: 11, label: 'Person 11'},
{id: 12, label: 'Person 12'},
{id: 13, label: 'Person 13'},
{id: 14, label: 'Person 14'},
{id: 15, label: 'Person 15'},
{id: 16, label: 'Person 16'},
{id: 17, label: 'Person 17'},
{id: 18, label: 'Person 18'},
{id: 19, label: 'Person 19'},
{id: 20, label: 'Person 20'},
{id: 21, label: 'Person 21'},
{id: 22, label: 'Person 22'},
{id: 23, label: 'Person 23'},
{id: 24, label: 'Person 24'},
{id: 25, label: 'Person 25'},
{id: 26, label: 'Person 26'},
{id: 27, label: 'Person 27'},
{id: 28, label: 'Person 28'},
{id: 29, label: 'Person 29'},
{id: 30, label: 'Person 30'},
{id: 31, label: 'Person 31'},
]);
// create an array with edges
var edges = new vis.DataSet([
{from: 1, to: 5, arrows:'from'},
{from: 2, to: 23, arrows:'from'},
{from: 3, to: 2, arrows:'from'},
{from: 4, to: 2, arrows:'from'},
{from: 5, to: 7, arrows:'from'},
{from: 6, to: 9, arrows:'from'},
{from: 7, to: 13, arrows:'from'},
{from: 8, to: 11, arrows:'from'},
{from: 13, to: 16, arrows:'from'},
{from: 16, to: 14, arrows:'from'},
{from: 18, to: 25, arrows:'from'},
{from: 19, to: 26, arrows:'from'},
{from: 20, to: 30, arrows:'from'},
{from: 21, to: 28, arrows:'from'},
{from: 22, to: 20, arrows:'from'},
{from: 23, to: 18, arrows:'from'},
{from: 1, to: 6, arrows:'from'},
{from: 2, to: 22, arrows:'from'},
{from: 3, to: 1, arrows:'from'},
{from: 4, to: 1, arrows:'from'},
{from: 5, to: 8, arrows:'from'},
{from: 6, to: 10, arrows:'from'},
{from: 8, to: 12, arrows:'from'},
{from: 13, to: 17, arrows:'from'},
{from: 16, to: 15, arrows:'from'},
{from: 18, to: 24, arrows:'from'},
{from: 19, to: 27, arrows:'from'},
{from: 20, to: 31, arrows:'from'},
{from: 21, to: 29, arrows:'from'},
{from: 22, to: 21, arrows:'from'},
{from: 23, to: 19, arrows:'from'},
]);
// create a network
var container = document.getElementById('mynetwork');
// provide the data in the vis format
var data = {
nodes: nodes,
edges: edges
};
var options = {
layout: {
hierarchical: {
enabled: true,
//levelSeparation: 130,
nodeSpacing: 220,
blockShifting: false,
parentCentralization: false,
edgeMinimization: true,
direction: 'DU',
sortMethod: 'directed',
},
},
edges: {
smooth: {
type: "cubicBezier",
forceDirection: 'vertical',
roundness: 0.25
},
},
physics: false,
}
// initialize your network!
var network = new vis.Network(container, data, options);
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<body>
<div id="mynetwork"></div>
</body>
I usually save my graph with x,y position to avoid messup,
I believe you can try saving old graph with x,y potion that will help to open as is in new version.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have this data where I don't have control to format or do any changes
//input json data
[
{
"Breaks":[
{"points":12,"points_total":12,"average":8.0,"faults":[]},
{"points":17,"points_total":29,"average":11.6,"faults":[]},
{"points":6,"points_total":35,"average":11.6667,"faults":[]},
{"points":8,"points_total":43,"average":10.75,"faults":[]},
{"points":14,"points_total":57,"average":11.4,"faults":[]},
],
"team_name":"King Sports"
},
{
"Breaks":[
{"points":18,"points_total":18,"average":15.4286,"faults":[]},
{"points":2,"points_total":20,"average":10.0,"faults":[]},
{"points":7,"points_total":27,"average":9.0,"faults":[]},
{"points":9,"points_total":36,"average":9.0,"faults":[]},
{"points":4,"points_total":40,"average":8.0,"faults":[]},
{"points":4,"points_total":44,"average":7.33333,"faults":[]},
{"points":4,"points_total":48,"average":6.85714,"faults":[]},
{"points":8,"points_total":56,"average":7.0,"faults":[]},
{"points":1,"points_total":57,"average":6.33333,"faults":[]},
{"points":6,"points_total":63,"average":6.3,"faults":[]},
{"points":3,"points_total":66,"average":5.82353,"faults":[]},
{"points":6,"points_total":72,"average":6.0,"faults":[]},
{"points":7,"points_total":79,"average":6.07692,"faults":[]},
{"points":3,"points_total":82,"average":5.85714,"faults":[]},
{"points":0,"points_total":82,"average":5.65517,"faults":[]}
],
"team_name":"Lion Sports"
}
]
So, I need to rebuild/restructure it to get following result.
There will be 20 "Breaks" if no value found in "Breaks" till it reaches to 20 then it should have "null" values.
//the result what i wanted = output expected
[
['Breaks', 'King Sports', 'Lion Sports'],
['1', 12, 18],
['2', 29, 20],
['3', 35, 27],
['4', 43, 36],
['5', 57, 40],
['6', null, 44],
['7', null, 48],
['8', null, 56],
['9', null, 57],
['10', null, 63],
['11', null, 66],
['12', null, 72],
['13', null, 79],
['14', null, 82],
['15', null, null],
['16', null, null],
['17', null, null],
['18', null, null],
['19', null, null],
['20', null, null]
]
You could generate the result array first and the put the values in.
var data = [{ Breaks: [{ points: 12, points_total: 12, average: 8.0, faults: [] }, { points: 17, points_total: 29, average: 11.6, faults: [] }, { points: 6, points_total: 35, average: 11.6667, faults: [] }, { points: 8, points_total: 43, average: 10.75, faults: [] }, { points: 14, points_total: 57, average: 11.4, faults: [] }], team_name: "King Sports" }, { Breaks: [{ points: 18, points_total: 18, average: 15.4286, faults: [] }, { points: 2, points_total: 20, average: 10.0, faults: [] }, { points: 7, points_total: 27, average: 9.0, faults: [] }, { points: 9, points_total: 36, average: 9.0, faults: [] }, { points: 4, points_total: 40, average: 8.0, faults: [] }, { points: 4, points_total: 44, average: 7.33333, faults: [] }, { points: 4, points_total: 48, average: 6.85714, faults: [] }, { points: 8, points_total: 56, average: 7.0, faults: [] }, { points: 1, points_total: 57, average: 6.33333, faults: [] }, { points: 6, points_total: 63, average: 6.3, faults: [] }, { points: 3, points_total: 66, average: 5.82353, faults: [] }, { points: 6, points_total: 72, average: 6.0, faults: [] }, { points: 7, points_total: 79, average: 6.07692, faults: [] }, { points: 3, points_total: 82, average: 5.85714, faults: [] }, { points: 0, points_total: 82, average: 5.65517, faults: [] }], team_name: "Lion Sports" }],
result = data.reduce(function (r, a, i) {
r[0][i + 1] = a.team_name;
a.Breaks.forEach(function (b, j) {
r[j + 1][i + 1] = b.points_total;
});
return r;
}, function (length) {
var a = Array.apply(null, { length: length + 1 }).map(function (_, i) { return [(i || 'Breaks').toString(), null, null] });
return a;
}(20));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }