organizing objects by name - javascript

Take the array of objects below "toursByHotels" — I want to take this data and get the sum of tours for each object that has the same name (the hotel's name, ie. Marriott, etc).
Is there an easier way in d3 than having to create 5 new arrays with the same names, then sum the tours of those?
var toursByHotel = [
{
"name": "Marriott",
"month": 1,
"tours": 10
},
{
"name": "Marriott",
"month": 2,
"tours": 15
},
{
"name": "Marriott",
"month": 3,
"tours": 8
},
{
"name": "Marriott",
"month": 4,
"tours": 12
},
{
"name": "Marriott",
"month": 5,
"tours": 18
},
{
"name": "Marriott",
"month": 6,
"tours": 25
},
{
"name": "Marriott",
"month": 7,
"tours": 40
},
{
"name": "Marriott",
"month": 8,
"tours": 33
},
{
"name": "Marriott",
"month": 9,
"tours": 25
},
{
"name": "Marriott",
"month": 10,
"tours": 21
},
{
"name": "Marriott",
"month": 11,
"tours": 18
},
{
"name": "Marriott",
"month": 12,
"tours": 14
},
{
"name": "Springhill",
"month": 1,
"tours": 10
},
{
"name": "Springhill",
"month": 2,
"tours": 15
},
{
"name": "Springhill",
"month": 3,
"tours": 8
},
{
"name": "Springhill",
"month": 4,
"tours": 12
},
{
"name": "Springhill",
"month": 5,
"tours": 18
},
{
"name": "Springhill",
"month": 6,
"tours": 25
},
{
"name": "Springhill",
"month": 7,
"tours": 40
},
{
"name": "Springhill",
"month": 8,
"tours": 33
},
{
"name": "Springhill",
"month": 9,
"tours": 25
},
{
"name": "Springhill",
"month": 10,
"tours": 21
},
{
"name": "Springhill",
"month": 11,
"tours": 18
},
{
"name": "Springhill",
"month": 12,
"tours": 14
},
{
"name": "Residence",
"month": 1,
"tours": 10
},
{
"name": "Residence",
"month": 2,
"tours": 15
},
{
"name": "Residence",
"month": 3,
"tours": 8
},
{
"name": "Residence",
"month": 4,
"tours": 12
},
{
"name": "Residence",
"month": 5,
"tours": 18
},
{
"name": "Residence",
"month": 6,
"tours": 25
},
{
"name": "Residence",
"month": 7,
"tours": 40
},
{
"name": "Residence",
"month": 8,
"tours": 33
},
{
"name": "Residence",
"month": 9,
"tours": 25
},
{
"name": "Residence",
"month": 10,
"tours": 21
},
{
"name": "Residence",
"month": 11,
"tours": 18
},
{
"name": "Residence",
"month": 12,
"tours": 14
},
{
"name": "Courtyard",
"month": 1,
"tours": 10
},
{
"name": "Courtyard",
"month": 2,
"tours": 15
},
{
"name": "Courtyard",
"month": 3,
"tours": 8
},
{
"name": "Courtyard",
"month": 4,
"tours": 12
},
{
"name": "Courtyard",
"month": 5,
"tours": 18
},
{
"name": "Courtyard",
"month": 6,
"tours": 25
},
{
"name": "Courtyard",
"month": 7,
"tours": 40
},
{
"name": "Courtyard",
"month": 8,
"tours": 33
},
{
"name": "Courtyard",
"month": 9,
"tours": 25
},
{
"name": "Courtyard",
"month": 10,
"tours": 21
},
{
"name": "Courtyard",
"month": 11,
"tours": 18
},
{
"name": "Courtyard",
"month": 12,
"tours": 14
},
{
"name": "Renaissance",
"month": 1,
"tours": 10
},
{
"name": "Renaissance",
"month": 2,
"tours": 15
},
{
"name": "Renaissance",
"month": 3,
"tours": 8
},
{
"name": "Renaissance",
"month": 4,
"tours": 12
},
{
"name": "Renaissance",
"month": 5,
"tours": 18
},
{
"name": "Renaissance",
"month": 6,
"tours": 25
},
{
"name": "Renaissance",
"month": 7,
"tours": 40
},
{
"name": "Renaissance",
"month": 8,
"tours": 33
},
{
"name": "Renaissance",
"month": 9,
"tours": 25
},
{
"name": "Renaissance",
"month": 10,
"tours": 21
},
{
"name": "Renaissance",
"month": 11,
"tours": 18
},
{
"name": "Renaissance",
"month": 12,
"tours": 14
}
];

You can use reduce and return object where each key is hotel name and value is sum of tours. DEMO
data = data.reduce(function(obj, e) {
obj[e.name] = (obj[e.name] || 0) + e.tours;
return obj;
}, {});
console.log(data)
If you want to get sum and percentage for each hotel you can do it like this DEMO
var result = {}
var total = data.reduce((a, b) => {return a + b.tours }, 0);
data.forEach(function(e) {
if(!this[e.name]) {
this[e.name] = {sum: e.tours, percentage: 0}
result[e.name] = this[e.name];
}
this[e.name].sum += e.tours;
this[e.name].percentage = (this[e.name].sum / total)*100;
}, {});
console.log(result)

Using reduce would be the best way to do this:
Working Example
// lets keep track of the total here:
var total = 0;
var totals = a.reduce(function(curr, next) {
curr[next.name] = (curr[next.name] || 0) + next.tours;
// increment total here:
total += next.tours;
return curr;
}, {});
for (var hotel in totals) {
var obj = {};
obj.name = totals[hotel];
obj.percentage = (totals[hotel] / total) * 100 + '%';
totals[hotel] = obj;
}
MDN docs on .reduce

Related

How to update the page after call Axios.patch?

I made a line change via axios.path, but after changes in db.json I constantly need to reload the page. How can I avoid this and make the data update automatically?
const submitEdits = (item) => {
axios.patch(`http://localhost:3004/item/${item.id}`, { text: editingText })
setIdItem(null);
setEditingText('')
}
My db.json
{
"item": [
{
"text": "123123123",
"id": 0,
"data": {
"year": 2012,
"day": 25,
"month": 1
}
},
{
"text": "Поступил в институт",
"id": 1,
"data": {
"year": 2007,
"day": 12,
"month": 4
}
},
{
"id": 2,
"text": "123",
"data": {
"year": 2022,
"day": 16,
"month": 5
}
}
]
}

Selection from JSON

I recently started learning JavaScript and faced a task that I can't complete in any way, every time I get the wrong data that I need
There is an object that contains data on banking transactions, I need to make a selection and form a new object using filter, map or reduce:
We assume that the initial balance on the card = 0.
Output the TOP 3 months with the largest number of operations by month.
Formalize it as a task_1(arr) function, where arr is the source array with data
for all months.
Output format:
[
{ year: 2019, month: 11, opsCount: 27 },
{ year: 2019, month: 10, opsCount: 26 },
{ year: 2019, month: 8, opsCount: 24 }
]
Output statistics for the end of the specified month.
monthmonthBalance - own balance by month = The amount of all
deposits minus the amount of all debits
montWithdrawal – total cash withdrawal amount
withdrawalRate – the share of the total amount of debits from the total amount of
deposits per month.
rank – user status calculated by the formula:
Gold if withdrawalRate < 0.15.
Silver if withdrawalRate < 0.3.
Bronze in all other cases.
Formalize it as a task_2(year, month, arr) function, where year, month is the desired one
month, and arr is the original array with all the data by month.
Output format:
{
date: '2019-01-31’,
monthBalance: 3829,
monthWithrawal: 33800,
withdrawalRate: 0.3133
rank: 'Bronze’
}
Calculate statistics from task 2 for all months of the period.
Add a field to each month
totalBalance - cumulative balance = Own balance for the
month + Balance for the cumulative balance for the previous month.
Output format:
[
{
date: '2019-01-31’,
monthBalance: 3829,
totalBalance: 3829,
monthWithrawal: 33800,
withdrawalRate: 0.3133
rank: ’Bronze'
},
...
]
Formalize it as a task_3(arr) function, where arr is the source array with data.
JSON with data:
[
{ "year": 2019, "month": 1, "day": 1, "type": "replenishment", "amount": 79817 },
{ "year": 2019, "month": 1, "day": 3, "type": "payment", "amount": 11334 },
{ "year": 2019, "month": 1, "day": 5, "type": "withdrawal", "amount": 26700 },
{ "year": 2019, "month": 1, "day": 5, "type": "payment", "amount": 15475 },
{ "year": 2019, "month": 1, "day": 6, "type": "payment", "amount": 4818 },
{ "year": 2019, "month": 1, "day": 6, "type": "payment", "amount": 1893 },
{ "year": 2019, "month": 1, "day": 7, "type": "payment", "amount": 3844 },
{ "year": 2019, "month": 1, "day": 7, "type": "withdrawal", "amount": 3100 },
{ "year": 2019, "month": 1, "day": 7, "type": "payment", "amount": 3230 },
{ "year": 2019, "month": 1, "day": 7, "type": "payment", "amount": 2427 },
{ "year": 2019, "month": 1, "day": 9, "type": "replenishment", "amount": 15835 },
{ "year": 2019, "month": 1, "day": 10, "type": "payment", "amount": 9670 },
{ "year": 2019, "month": 1, "day": 11, "type": "payment", "amount": 582 },
{ "year": 2019, "month": 1, "day": 11, "type": "withdrawal", "amount": 1100 },
{ "year": 2019, "month": 1, "day": 11, "type": "replenishment", "amount": 5971 },
{ "year": 2019, "month": 1, "day": 12, "type": "payment", "amount": 173 },
{ "year": 2019, "month": 1, "day": 14, "type": "withdrawal", "amount": 1500 },
{ "year": 2019, "month": 1, "day": 14, "type": "payment", "amount": 3641 },
{ "year": 2019, "month": 1, "day": 16, "type": "payment", "amount": 4669 },
{ "year": 2019, "month": 1, "day": 18, "type": "payment", "amount": 2460 },
{ "year": 2019, "month": 1, "day": 19, "type": "payment", "amount": 1307 },
{ "year": 2019, "month": 1, "day": 20, "type": "withdrawal", "amount": 1400 },
{ "year": 2019, "month": 1, "day": 21, "type": "payment", "amount": 952 },
{ "year": 2019, "month": 1, "day": 21, "type": "payment", "amount": 561 },
{ "year": 2019, "month": 1, "day": 21, "type": "replenishment", "amount": 6236 },
{ "year": 2019, "month": 1, "day": 22, "type": "payment", "amount": 888 },
{ "year": 2019, "month": 1, "day": 22, "type": "payment", "amount": 2306 },
{ "year": 2019, "month": 2, "day": 1, "type": "replenishment", "amount": 84839 },
{ "year": 2019, "month": 2, "day": 1, "type": "withdrawal", "amount": 27700 },
{ "year": 2019, "month": 2, "day": 1, "type": "payment", "amount": 11145 },
{ "year": 2019, "month": 2, "day": 2, "type": "payment", "amount": 4075 },
{ "year": 2019, "month": 2, "day": 4, "type": "withdrawal", "amount": 10900 },
{ "year": 2019, "month": 2, "day": 6, "type": "payment", "amount": 10537 },
{ "year": 2019, "month": 2, "day": 6, "type": "payment", "amount": 6001 },
{ "year": 2019, "month": 2, "day": 7, "type": "withdrawal", "amount": 7300 },
{ "year": 2019, "month": 2, "day": 10, "type": "withdrawal", "amount": 1500 },
{ "year": 2019, "month": 2, "day": 10, "type": "payment", "amount": 3584 },
{ "year": 2019, "month": 2, "day": 11, "type": "payment", "amount": 701 },
{ "year": 2019, "month": 3, "day": 1, "type": "replenishment", "amount": 84771 },
{ "year": 2019, "month": 3, "day": 3, "type": "withdrawal", "amount": 22700 },
{ "year": 2019, "month": 3, "day": 5, "type": "payment", "amount": 12352 },
{ "year": 2019, "month": 3, "day": 8, "type": "payment", "amount": 2795 },
{ "year": 2019, "month": 3, "day": 11, "type": "withdrawal", "amount": 16600 },
{ "year": 2019, "month": 3, "day": 11, "type": "replenishment", "amount": 4141 },
{ "year": 2019, "month": 3, "day": 11, "type": "payment", "amount": 9854 },
{ "year": 2019, "month": 3, "day": 13, "type": "withdrawal", "amount": 1200 },
{ "year": 2019, "month": 3, "day": 14, "type": "payment", "amount": 11573 },
{ "year": 2019, "month": 3, "day": 14, "type": "payment", "amount": 5138 },
{ "year": 2019, "month": 3, "day": 15, "type": "payment", "amount": 731 },
{ "year": 2019, "month": 3, "day": 17, "type": "payment", "amount": 5053 },
{ "year": 2019, "month": 3, "day": 19, "type": "withdrawal", "amount": 400 },
{ "year": 2019, "month": 3, "day": 20, "type": "payment", "amount": 1745 },
{ "year": 2019, "month": 3, "day": 20, "type": "payment", "amount": 602 },
{ "year": 2019, "month": 3, "day": 21, "type": "payment", "amount": 178 },
{ "year": 2019, "month": 3, "day": 22, "type": "payment", "amount": 353 },
{ "year": 2019, "month": 3, "day": 23, "type": "payment", "amount": 837 },
{ "year": 2019, "month": 3, "day": 23, "type": "payment", "amount": 330 },
{ "year": 2019, "month": 3, "day": 23, "type": "payment", "amount": 799 },
{ "year": 2019, "month": 3, "day": 24, "type": "payment", "amount": 294 },
{ "year": 2019, "month": 3, "day": 24, "type": "payment", "amount": 260 },
{ "year": 2019, "month": 3, "day": 25, "type": "withdrawal", "amount": 200 },
{ "year": 2019, "month": 4, "day": 1, "type": "replenishment", "amount": 88656 },
{ "year": 2019, "month": 4, "day": 4, "type": "payment", "amount": 37852 },
{ "year": 2019, "month": 4, "day": 7, "type": "payment", "amount": 9365 },
{ "year": 2019, "month": 4, "day": 8, "type": "payment", "amount": 16701 },
{ "year": 2019, "month": 4, "day": 11, "type": "payment", "amount": 8979 },
{ "year": 2019, "month": 4, "day": 11, "type": "payment", "amount": 1971 },
{ "year": 2019, "month": 4, "day": 13, "type": "payment", "amount": 1261 },
{ "year": 2019, "month": 4, "day": 13, "type": "withdrawal", "amount": 800 },
{ "year": 2019, "month": 4, "day": 15, "type": "payment", "amount": 5553 },
{ "year": 2019, "month": 4, "day": 17, "type": "payment", "amount": 2593 },
{ "year": 2019, "month": 4, "day": 18, "type": "replenishment", "amount": 6915 },
{ "year": 2019, "month": 4, "day": 19, "type": "replenishment", "amount": 17647 },
{ "year": 2019, "month": 4, "day": 21, "type": "payment", "amount": 13814 },
{ "year": 2019, "month": 4, "day": 22, "type": "payment", "amount": 2707 },
{ "year": 2019, "month": 4, "day": 22, "type": "withdrawal", "amount": 1300 },
{ "year": 2019, "month": 4, "day": 22, "type": "withdrawal", "amount": 2900 },
{ "year": 2019, "month": 4, "day": 23, "type": "replenishment", "amount": 10709 },
{ "year": 2019, "month": 4, "day": 23, "type": "payment", "amount": 686 },
{ "year": 2019, "month": 4, "day": 23, "type": "withdrawal", "amount": 5100 },
{ "year": 2019, "month": 4, "day": 23, "type": "payment", "amount": 3830 },
{ "year": 2019, "month": 5, "day": 1, "type": "replenishment", "amount": 59877 },
{ "year": 2019, "month": 5, "day": 2, "type": "payment", "amount": 14095 },
{ "year": 2019, "month": 5, "day": 5, "type": "payment", "amount": 10858 },
{ "year": 2019, "month": 5, "day": 8, "type": "payment", "amount": 9412 },
{ "year": 2019, "month": 5, "day": 11, "type": "replenishment", "amount": 6892 },
{ "year": 2019, "month": 5, "day": 11, "type": "payment", "amount": 17541 },
{ "year": 2019, "month": 5, "day": 11, "type": "payment", "amount": 2666 },
{ "year": 2019, "month": 5, "day": 11, "type": "payment", "amount": 3935 },
{ "year": 2019, "month": 5, "day": 12, "type": "withdrawal", "amount": 2600 },
{ "year": 2019, "month": 5, "day": 14, "type": "payment", "amount": 2096 },
{ "year": 2019, "month": 5, "day": 14, "type": "replenishment", "amount": 2733 },
{ "year": 2019, "month": 5, "day": 15, "type": "replenishment", "amount": 538 },
{ "year": 2019, "month": 5, "day": 15, "type": "payment", "amount": 5324 },
{ "year": 2019, "month": 5, "day": 15, "type": "payment", "amount": 2490 },
{ "year": 2019, "month": 5, "day": 15, "type": "payment", "amount": 3510 },
{ "year": 2019, "month": 5, "day": 17, "type": "withdrawal", "amount": 300 },
{ "year": 2019, "month": 5, "day": 17, "type": "payment", "amount": 133 },
{ "year": 2019, "month": 6, "day": 1, "type": "replenishment", "amount": 89064 },
{ "year": 2019, "month": 6, "day": 2, "type": "payment", "amount": 7613 },
{ "year": 2019, "month": 6, "day": 2, "type": "payment", "amount": 33742 },
{ "year": 2019, "month": 6, "day": 5, "type": "withdrawal", "amount": 7200 },
{ "year": 2019, "month": 6, "day": 6, "type": "payment", "amount": 15125 },
{ "year": 2019, "month": 6, "day": 9, "type": "payment", "amount": 3379 },
{ "year": 2019, "month": 6, "day": 10, "type": "payment", "amount": 1260 },
{ "year": 2019, "month": 6, "day": 12, "type": "payment", "amount": 11066 },
{ "year": 2019, "month": 6, "day": 12, "type": "replenishment", "amount": 7050 },
{ "year": 2019, "month": 6, "day": 12, "type": "payment", "amount": 7531 },
{ "year": 2019, "month": 6, "day": 13, "type": "payment", "amount": 4776 },
{ "year": 2019, "month": 6, "day": 13, "type": "replenishment", "amount": 4456 },
{ "year": 2019, "month": 6, "day": 14, "type": "replenishment", "amount": 7998 },
{ "year": 2019, "month": 6, "day": 16, "type": "payment", "amount": 2437 },
{ "year": 2019, "month": 6, "day": 16, "type": "replenishment", "amount": 11729 },
{ "year": 2019, "month": 6, "day": 18, "type": "payment", "amount": 11216 },
{ "year": 2019, "month": 6, "day": 19, "type": "payment", "amount": 3420 },
{ "year": 2019, "month": 6, "day": 19, "type": "payment", "amount": 1339 },
{ "year": 2019, "month": 6, "day": 20, "type": "payment", "amount": 5578 },
{ "year": 2019, "month": 6, "day": 21, "type": "withdrawal", "amount": 1600 },
{ "year": 2019, "month": 6, "day": 21, "type": "withdrawal", "amount": 400 },
{ "year": 2019, "month": 7, "day": 1, "type": "replenishment", "amount": 51749 },
{ "year": 2019, "month": 7, "day": 2, "type": "payment", "amount": 2875 },
{ "year": 2019, "month": 7, "day": 2, "type": "payment", "amount": 10315 },
{ "year": 2019, "month": 7, "day": 5, "type": "payment", "amount": 18501 },
{ "year": 2019, "month": 7, "day": 5, "type": "payment", "amount": 12728 },
{ "year": 2019, "month": 7, "day": 7, "type": "payment", "amount": 4505 },
{ "year": 2019, "month": 7, "day": 8, "type": "payment", "amount": 2758 },
{ "year": 2019, "month": 7, "day": 8, "type": "payment", "amount": 60 },
{ "year": 2019, "month": 7, "day": 10, "type": "withdrawal", "amount": 1100 },
{ "year": 2019, "month": 7, "day": 12, "type": "withdrawal", "amount": 1000 },
{ "year": 2019, "month": 7, "day": 13, "type": "payment", "amount": 151 },
{ "year": 2019, "month": 8, "day": 1, "type": "replenishment", "amount": 85156 },
{ "year": 2019, "month": 8, "day": 1, "type": "payment", "amount": 33978 },
{ "year": 2019, "month": 8, "day": 2, "type": "payment", "amount": 6548 },
{ "year": 2019, "month": 8, "day": 3, "type": "payment", "amount": 5909 },
{ "year": 2019, "month": 8, "day": 6, "type": "payment", "amount": 2326 },
{ "year": 2019, "month": 8, "day": 6, "type": "payment", "amount": 17798 },
{ "year": 2019, "month": 8, "day": 9, "type": "replenishment", "amount": 10770 },
{ "year": 2019, "month": 8, "day": 10, "type": "withdrawal", "amount": 7400 },
{ "year": 2019, "month": 8, "day": 12, "type": "payment", "amount": 6065 },
{ "year": 2019, "month": 8, "day": 14, "type": "withdrawal", "amount": 900 },
{ "year": 2019, "month": 8, "day": 14, "type": "withdrawal", "amount": 1400 },
{ "year": 2019, "month": 8, "day": 14, "type": "payment", "amount": 4673 },
{ "year": 2019, "month": 8, "day": 15, "type": "payment", "amount": 960 },
{ "year": 2019, "month": 8, "day": 15, "type": "payment", "amount": 1085 },
{ "year": 2019, "month": 8, "day": 17, "type": "payment", "amount": 3723 },
{ "year": 2019, "month": 8, "day": 17, "type": "payment", "amount": 2522 },
{ "year": 2019, "month": 8, "day": 19, "type": "replenishment", "amount": 2496 },
{ "year": 2019, "month": 8, "day": 20, "type": "payment", "amount": 876 },
{ "year": 2019, "month": 8, "day": 20, "type": "payment", "amount": 2504 },
{ "year": 2019, "month": 8, "day": 21, "type": "payment", "amount": 826 },
{ "year": 2019, "month": 8, "day": 22, "type": "payment", "amount": 768 },
{ "year": 2019, "month": 8, "day": 23, "type": "withdrawal", "amount": 700 },
{ "year": 2019, "month": 8, "day": 23, "type": "payment", "amount": 190 },
{ "year": 2019, "month": 8, "day": 24, "type": "payment", "amount": 235 },
{ "year": 2019, "month": 9, "day": 1, "type": "replenishment", "amount": 95512 },
{ "year": 2019, "month": 9, "day": 3, "type": "payment", "amount": 26758 },
{ "year": 2019, "month": 9, "day": 3, "type": "replenishment", "amount": 8377 },
{ "year": 2019, "month": 9, "day": 4, "type": "payment", "amount": 30865 },
{ "year": 2019, "month": 9, "day": 4, "type": "withdrawal", "amount": 12800 },
{ "year": 2019, "month": 9, "day": 7, "type": "payment", "amount": 10518 },
{ "year": 2019, "month": 9, "day": 8, "type": "payment", "amount": 11007 },
{ "year": 2019, "month": 9, "day": 10, "type": "payment", "amount": 5613 },
{ "year": 2019, "month": 9, "day": 10, "type": "withdrawal", "amount": 1700 },
{ "year": 2019, "month": 9, "day": 12, "type": "payment", "amount": 2237 },
{ "year": 2019, "month": 9, "day": 14, "type": "payment", "amount": 885 },
{ "year": 2019, "month": 9, "day": 14, "type": "payment", "amount": 977 },
{ "year": 2019, "month": 9, "day": 15, "type": "payment", "amount": 766 },
{ "year": 2019, "month": 9, "day": 17, "type": "payment", "amount": 360 },
{ "year": 2019, "month": 9, "day": 18, "type": "payment", "amount": 116 },
{ "year": 2019, "month": 9, "day": 18, "type": "withdrawal", "amount": 200 },
{ "year": 2019, "month": 9, "day": 19, "type": "payment", "amount": 115 },
{ "year": 2019, "month": 9, "day": 20, "type": "payment", "amount": 50 },
{ "year": 2019, "month": 9, "day": 21, "type": "payment", "amount": 32 },
{ "year": 2019, "month": 10, "day": 1, "type": "replenishment", "amount": 90475 },
{ "year": 2019, "month": 10, "day": 1, "type": "replenishment", "amount": 8845 },
{ "year": 2019, "month": 10, "day": 2, "type": "payment", "amount": 7121 },
{ "year": 2019, "month": 10, "day": 3, "type": "payment", "amount": 27955 },
{ "year": 2019, "month": 10, "day": 3, "type": "payment", "amount": 23079 },
{ "year": 2019, "month": 10, "day": 4, "type": "payment", "amount": 5948 },
{ "year": 2019, "month": 10, "day": 7, "type": "withdrawal", "amount": 4400 },
{ "year": 2019, "month": 10, "day": 8, "type": "payment", "amount": 9677 },
{ "year": 2019, "month": 10, "day": 9, "type": "payment", "amount": 3912 },
{ "year": 2019, "month": 10, "day": 9, "type": "replenishment", "amount": 3870 },
{ "year": 2019, "month": 10, "day": 9, "type": "payment", "amount": 6949 },
{ "year": 2019, "month": 10, "day": 10, "type": "withdrawal", "amount": 3400 },
{ "year": 2019, "month": 10, "day": 10, "type": "replenishment", "amount": 7471 },
{ "year": 2019, "month": 10, "day": 10, "type": "payment", "amount": 5962 },
{ "year": 2019, "month": 10, "day": 10, "type": "payment", "amount": 4990 },
{ "year": 2019, "month": 10, "day": 10, "type": "withdrawal", "amount": 3000 },
{ "year": 2019, "month": 10, "day": 11, "type": "withdrawal", "amount": 200 },
{ "year": 2019, "month": 10, "day": 12, "type": "withdrawal", "amount": 1300 },
{ "year": 2019, "month": 10, "day": 13, "type": "payment", "amount": 986 },
{ "year": 2019, "month": 10, "day": 14, "type": "replenishment", "amount": 4225 },
{ "year": 2019, "month": 10, "day": 15, "type": "withdrawal", "amount": 900 },
{ "year": 2019, "month": 10, "day": 17, "type": "payment", "amount": 864 },
{ "year": 2019, "month": 10, "day": 17, "type": "withdrawal", "amount": 1000 },
{ "year": 2019, "month": 10, "day": 18, "type": "payment", "amount": 801 },
{ "year": 2019, "month": 10, "day": 19, "type": "withdrawal", "amount": 300 },
{ "year": 2019, "month": 10, "day": 20, "type": "payment", "amount": 530 },
{ "year": 2019, "month": 11, "day": 1, "type": "replenishment", "amount": 80285 },
{ "year": 2019, "month": 11, "day": 3, "type": "payment", "amount": 38155 },
{ "year": 2019, "month": 11, "day": 6, "type": "payment", "amount": 10260 },
{ "year": 2019, "month": 11, "day": 9, "type": "payment", "amount": 11013 },
{ "year": 2019, "month": 11, "day": 10, "type": "payment", "amount": 1232 },
{ "year": 2019, "month": 11, "day": 12, "type": "withdrawal", "amount": 5100 },
{ "year": 2019, "month": 11, "day": 12, "type": "payment", "amount": 1192 },
{ "year": 2019, "month": 11, "day": 13, "type": "withdrawal", "amount": 4500 },
{ "year": 2019, "month": 11, "day": 14, "type": "replenishment", "amount": 4304 },
{ "year": 2019, "month": 11, "day": 15, "type": "withdrawal", "amount": 700 },
{ "year": 2019, "month": 11, "day": 15, "type": "replenishment", "amount": 15857 },
{ "year": 2019, "month": 11, "day": 17, "type": "payment", "amount": 9134 },
{ "year": 2019, "month": 11, "day": 19, "type": "payment", "amount": 8090 },
{ "year": 2019, "month": 11, "day": 20, "type": "payment", "amount": 2117 },
{ "year": 2019, "month": 11, "day": 20, "type": "withdrawal", "amount": 2700 },
{ "year": 2019, "month": 11, "day": 21, "type": "withdrawal", "amount": 2200 },
{ "year": 2019, "month": 11, "day": 21, "type": "payment", "amount": 258 },
{ "year": 2019, "month": 11, "day": 21, "type": "withdrawal", "amount": 1200 },
{ "year": 2019, "month": 11, "day": 21, "type": "payment", "amount": 1966 },
{ "year": 2019, "month": 11, "day": 21, "type": "withdrawal", "amount": 200 },
{ "year": 2019, "month": 11, "day": 21, "type": "payment", "amount": 493 },
{ "year": 2019, "month": 11, "day": 21, "type": "payment", "amount": 396 },
{ "year": 2019, "month": 11, "day": 21, "type": "withdrawal", "amount": 200 },
{ "year": 2019, "month": 11, "day": 21, "type": "payment", "amount": 134 },
{ "year": 2019, "month": 11, "day": 22, "type": "replenishment", "amount": 4815 },
{ "year": 2019, "month": 11, "day": 22, "type": "withdrawal", "amount": 500 },
{ "year": 2019, "month": 11, "day": 23, "type": "payment", "amount": 1793 },
{ "year": 2019, "month": 12, "day": 1, "type": "replenishment", "amount": 93524 },
{ "year": 2019, "month": 12, "day": 2, "type": "payment", "amount": 44289 },
{ "year": 2019, "month": 12, "day": 2, "type": "payment", "amount": 7724 },
{ "year": 2019, "month": 12, "day": 4, "type": "payment", "amount": 9420 },
{ "year": 2019, "month": 12, "day": 4, "type": "withdrawal", "amount": 3200 },
{ "year": 2019, "month": 12, "day": 4, "type": "payment", "amount": 651 },
{ "year": 2019, "month": 12, "day": 6, "type": "payment", "amount": 9259 },
{ "year": 2019, "month": 12, "day": 6, "type": "withdrawal", "amount": 5700 },
{ "year": 2019, "month": 12, "day": 7, "type": "payment", "amount": 1298 },
{ "year": 2019, "month": 12, "day": 9, "type": "payment", "amount": 3108 },
{ "year": 2019, "month": 12, "day": 11, "type": "withdrawal", "amount": 4300 },
{ "year": 2019, "month": 12, "day": 13, "type": "withdrawal", "amount": 200 },
{ "year": 2019, "month": 12, "day": 13, "type": "replenishment", "amount": 9096 },
{ "year": 2019, "month": 12, "day": 14, "type": "payment", "amount": 7205 },
{ "year": 2019, "month": 12, "day": 16, "type": "payment", "amount": 658 },
{ "year": 2019, "month": 12, "day": 17, "type": "replenishment", "amount": 9654 }
]
First, for the task_1, I get an object that contains values by the key "month":
var arr1 = ops.map(function(item){
return item.month
})
Then I find the sum of the unique values in the resulting array:
quantity var = {};
for (var i = 0; i <arr1.length; i++){
quantity [arr1[i]] = 1 + (quantity [arr1[i]]|/ 0);
}
and I get the counts object in the following form:
counts
{1: 27, 2: 11, 3: 23, 4: 20, 5: 17, 6: 21, 7: 11, 8: 24, 9: 19, 10: 26, 11: 27, 12: 16}
After that, I sort to find the 3 maximum values:
function findMax 3(obj){
var res = [-1,-1,-1];
for (let key in obj){
res[3] = obj[key];
res.sort(function(a,b){return b-a});
}
res.pop();
return res;
}
console.log(findMax3(counts));
In the console I get the following:
[27, 27, 26]
but at the same time, I no longer know the index of the months to which these values relate
Thank you for your answers!
To solve these problems here is the hint "GroupBy using reduce"
As for task1
function task_1(arr) {
// Dictionary of Month to Object.
const groupedByMonth = arr.reduce(function (acc, currentValue) {
let groupKey = currentValue.month;
if (!acc[groupKey]) {
acc[groupKey] = {
year: currentValue.year,
month: currentValue.month,
opsCount: 0
};
}
acc[groupKey].opsCount += 1; // ++
return acc;
}, {});
// Sort by opsCount
function opsSort(a, b) { return b.opsCount - a.opsCount };
return Object
.values(groupedByMonth) // Array of Values
.sort(opsSort)
.slice(0, 3) // Top 3
}
Once you understand how task 1 is solved, task 2 becomes a bit simpler
Solution for Task 2
function getEndOfMonth(year, month) {
const date = new Date(year, month, 0);
let monthStr = "";
if (month < 10) {
monthStr += "0";
}
monthStr += month;
return year + "-" + monthStr + "-" + date.getDate();
}
function getRank(rate) {
if (rate < 0.15)
return 'Gold';
if (rate < 0.3)
return 'Gold';
return 'Bronze';
}
function task_2(arr) {
const groupedByMonth = arr.reduce(function (acc, currentValue) {
let groupKey = currentValue.month;
if (!acc[groupKey]) {
acc[groupKey] = {
date: getEndOfMonth(currentValue.year, currentValue.month),
monthWithrawal: 0,
totalDebits: 0,
totalDeposits: 0
};
}
// Based on type calculate value.
if (currentValue.type === "replenishment") {
acc[groupKey].totalDeposits += currentValue.amount;
} else if (currentValue.type === "payment") {
acc[groupKey].totalDebits += currentValue.amount;
} else if (currentValue.type === "withdrawal") {
acc[groupKey].monthWithrawal += currentValue.amount;
}
return acc;
}, {});
return Object
.values(groupedByMonth) // Array of Values
.map(function (ele) {
const withdrawalRate = ele.monthWithrawal / ele.totalDeposits;
return {
date: ele.date,
monthBalance: ele.totalDeposits - ele.totalDebits - ele.monthWithrawal,
monthWithrawal: ele.monthWithrawal,
withdrawalRate,
rank: getRank(withdrawalRate)
};
});
}
if you have solved task 2, task 3 is just adding reduce/map to task2's solution.
function task_3(arr) {
// Assuming that task_2 function is defined.
const task2 = task_2(arr);
// Can be Solved using reduce.
return task2
.map(function (currentValue, index, array) {
const tmp = currentValue;
tmp.totalBalance = tmp.monthBalance;
if (index > 0) { // Not the first element.
tmp.totalBalance += array[index - 1].totalBalance;
}
return tmp;
})
}
Task 1
const task_1 = (arr, top = 3) => {
const ops = arr.reduce((acc, {year, month}) => {
const accByMonth = acc.find((obj) => (obj.month === month));
if (accByMonth) {
accByMonth.opsCount +=1;
} else {
acc.push({ year, month, opsCount: 1 })
}
return acc;
}, []);
const sortedOps = ops.sort(
(obj1, obj2) => (obj2.opsCount - obj1.opsCount)
);
return sortedOps.slice(0, top);
}
console.log(task_1(data));
//[
// { year: 2019, month: 1, opsCount: 27 },
// { year: 2019, month: 11, opsCount: 27 },
// { year: 2019, month: 10, opsCount: 26 }
//]
Task 2
const getTotalByType = (arr, type) => arr
.filter((obj) => obj.type === type)
.reduce((sum, { amount }) => sum + amount, 0);
const getRank = (ratio) =>{
const ranks = [[0.15, 'Gold'], [0.3, 'Silver'], [Infinity, 'Bronze']]
return ranks.find(([ rankRatio ]) => ratio < rankRatio)[1];
}
const task_2 = (year, month, arr) => {
const filteredData = arr.filter((obj) => (obj.year === year) && (obj.month === month));
const maxDay = Math.max(...filteredData.map(({ day }) => day));
const date = new Date(year, month - 1, maxDay).toISOString().split('T')[0];
const monthReplenishment = getTotalByType(filteredData, 'replenishment');
const monthPayment = getTotalByType(filteredData, 'payment');
const monthWithdrawal = getTotalByType(filteredData, 'withdrawal');
const monthBalance = monthReplenishment - monthPayment - monthWithdrawal;
const withdrawalRate = parseFloat((monthWithdrawal / monthReplenishment).toFixed(4));
const rank = getRank(withdrawalRate);
return {
date,
monthBalance,
monthWithdrawal,
withdrawalRate,
rank,
}
};
console.log(task_2(2019, 7, data));
//{
// date: '2019-07-13',
// monthBalance: -2244,
// monthWithdrawal: 2100,
// withdrawalRate: 0.0406,
// rank: 'Gold'
//}
Task 3
const getPeriods = (arr) => arr.
reduce((acc, {year, month}) => {
const isPeriodInAcc = acc.some(
(obj) => (obj.month === month) && (obj.year === year)
);
if (!isPeriodInAcc) {
acc.push({ year, month })
}
return acc;
}, [])
const task_3 = (arr, initialBalance = 0) => {
const periods = getPeriods(arr);
let totalBalance = initialBalance;
return periods.map(({ year, month }) => {
const opsByPeriod = task_2(year, month, arr);
totalBalance += opsByPeriod.monthBalance;
return {...opsByPeriod, totalBalance}
});
}
console.log(task_3(data));
//[
// {
// date: '2019-01-22',
// monthBalance: 3829,
// monthWithdrawal: 33800,
// withdrawalRate: 0.3134,
// rank: 'Bronze',
// totalBalance: 3829
// },
// ...
// {...},
//]

Custom ticks, values, and format

I'm trying to create two custom ticks on the far left and right side of my horizontal axis in D3.
The labels I want to use for my ticks do not come from any of my data — I just want to add in "Q1 2015" and "Q2 2015" in place of whatever it would normally pull in from my xScale.
Here's a fiddle and the code I'm using to construct my xAxis.
Right now there is nothing showing up on my axis for ticks — the data seems to be returning from the tickFormat function but it doesn't show up, so I'm confused at this point. I can't figure out where I am going wrong.
var xAxis = d3.svg.axis().orient("bottom")
// .ticks(2)
.tickValues([2015, 2016])
.tickFormat(function(d) {
console.log("Q1 " + d);
return "Q1" + d;
})
.outerTickSize(0);
The issue in here is that you are setting numeric tick values
.tickValues([2015, 2016])
which will basically try to create a tick with the 2015 and 2016 values.
Since your xAxis scale is set to use the following:
xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
which was only returning a month from your data object, so the ticks were rendering but outside of your viewport due to the difference of values [monthValue] vs [yearValue].
If you are going to use a time scale you need to give a proper input to the domain of that scale.
// X Axis Scale
var xScale = d3.time.scale().range([0, innerWidth]);
// Axis Function
var xAxis = d3.svg.axis()
.orient("bottom")
.scale(xScale)
.tickFormat(function(d) { // Getting the value of the tick :)
return "Q1:" + mS[d.getMonth()];
});
/*
* Setting the domain of the x scale with a correct Date value
*
* We use nested[0].values which iterates over the values of just
* one hotel and the corresponding dates since the dates are the
* same for the remaining hotels.
*/
xScale.domain(d3.extent(nested[0].values, function (d){
var f = new Date('2012', (d[xColumn] - 1), '01');
return f;
}));
and dont forget to use the same approach in your area function.
var area = d3.svg.area()
.x(function(d) {
return xScale( new Date('2012', (d[xColumn] - 1), '01'))
})
.y0(function(d) { return yScale(d.y0); })
.y1(function(d) { return yScale(d.y0 + d.y); });
var mS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'];
var outerWidth = 1000;
var outerHeight = 250;
var margin = { left: 55, top: 5, right: 100, bottom: 60 };
var xColumn = "month";
var yColumn = "tours";
var colorColumn = "name";
var areaColumn = colorColumn;
var xAxisLabelText = "Month";
var xAxisLabelOffset = 48;
var innerWidth = outerWidth - margin.left - margin.right;
var innerHeight = outerHeight - margin.top - margin.bottom;
var svg = d3.select("body").append("svg")
.attr("width", outerWidth)
.attr("height", outerHeight);
var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var xAxisG = g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerHeight + ")")
var xAxisLabel = xAxisG.append("text")
.style("text-anchor", "middle")
.attr("transform", "translate(" + (innerWidth / 2) + "," + xAxisLabelOffset + ")")
.attr("class", "label")
.text(xAxisLabelText);
var colorLegendG = svg.append("g")
.attr("class", "color-legend")
.attr("transform", "translate(403, 5)");
var xScale = d3.time.scale().range([0, innerWidth]);
var yScale = d3.scale.linear().range([innerHeight, 0]);
var colorScale = d3.scale.category10();
var xAxis = d3.svg.axis().orient("bottom").scale(xScale)
.tickFormat(function(d, i, e) {
return "Q1:" + mS[d.getMonth()];
});
var stack = d3.layout.stack()
.y(function (d){ return d[yColumn]; })
.values(function (d){ return d.values; });
var area = d3.svg.area()
.x(function(d) {
return xScale( new Date('2012', (d[xColumn] - 1), '01'))
})
.y0(function(d) { return yScale(d.y0); })
.y1(function(d) { return yScale(d.y0 + d.y); });
function render(data){
var nested = d3.nest()
.key(function (d){ return d[areaColumn]; })
.entries(data);
colorScale.domain(nested.map(function (d){ return d.key; }));
// Reversed the order here so the order matches between legend & areas.
var layers = stack(nested.reverse());
xScale.domain(d3.extent(nested[0].values, function (d){
var f = new Date('2012', (d[xColumn] - 1), '01');
return f;
}));
yScale.domain([0,
d3.max(layers, function (layer){
return d3.max(layer.values, function (d){
return d.y0 + d.y;
});
})
]);
var total = d3.sum(layers, function(layer) {
return d3.sum(layer.values, function(d) {
return d.tours;
});
});
var paths = g.selectAll(".chart-area").data(layers);
paths.enter().append("path").attr("class", "chart-line");
paths.exit().remove();
paths.attr("d", function (d){ return area(d.values); })
.attr("fill", function (d){ return colorScale(d.key); });
xAxisG.call(xAxis);
svg.append("g")
.attr("class", "legend")
.selectAll("text")
.data(layers)
.enter().append("text")
.text(function(d) { return (d.key) + ' (' + d.key + ')'; })
.attr('fill', function(d) { return colorScale(d.key); })
.attr('y', function(d, i) { return 20 * (i + 1); })
.attr('x', "0");
}
var toursByHotel = [
{
"name": "Marriott",
"month": 1,
"tours": 10
},
{
"name": "Marriott",
"month": 2,
"tours": 15
},
{
"name": "Marriott",
"month": 3,
"tours": 8
},
{
"name": "Marriott",
"month": 4,
"tours": 12
},
{
"name": "Marriott",
"month": 5,
"tours": 18
},
{
"name": "Marriott",
"month": 6,
"tours": 25
},
{
"name": "Marriott",
"month": 7,
"tours": 40
},
{
"name": "Marriott",
"month": 8,
"tours": 33
},
{
"name": "Marriott",
"month": 9,
"tours": 25
},
{
"name": "Marriott",
"month": 10,
"tours": 21
},
{
"name": "Marriott",
"month": 11,
"tours": 18
},
{
"name": "Marriott",
"month": 12,
"tours": 14
},
{
"name": "Springhill",
"month": 1,
"tours": 10
},
{
"name": "Springhill",
"month": 2,
"tours": 15
},
{
"name": "Springhill",
"month": 3,
"tours": 8
},
{
"name": "Springhill",
"month": 4,
"tours": 12
},
{
"name": "Springhill",
"month": 5,
"tours": 18
},
{
"name": "Springhill",
"month": 6,
"tours": 25
},
{
"name": "Springhill",
"month": 7,
"tours": 40
},
{
"name": "Springhill",
"month": 8,
"tours": 33
},
{
"name": "Springhill",
"month": 9,
"tours": 25
},
{
"name": "Springhill",
"month": 10,
"tours": 21
},
{
"name": "Springhill",
"month": 11,
"tours": 18
},
{
"name": "Springhill",
"month": 12,
"tours": 14
},
{
"name": "Residence",
"month": 1,
"tours": 10
},
{
"name": "Residence",
"month": 2,
"tours": 15
},
{
"name": "Residence",
"month": 3,
"tours": 8
},
{
"name": "Residence",
"month": 4,
"tours": 12
},
{
"name": "Residence",
"month": 5,
"tours": 18
},
{
"name": "Residence",
"month": 6,
"tours": 25
},
{
"name": "Residence",
"month": 7,
"tours": 40
},
{
"name": "Residence",
"month": 8,
"tours": 33
},
{
"name": "Residence",
"month": 9,
"tours": 25
},
{
"name": "Residence",
"month": 10,
"tours": 21
},
{
"name": "Residence",
"month": 11,
"tours": 18
},
{
"name": "Residence",
"month": 12,
"tours": 14
},
{
"name": "Courtyard",
"month": 1,
"tours": 10
},
{
"name": "Courtyard",
"month": 2,
"tours": 15
},
{
"name": "Courtyard",
"month": 3,
"tours": 8
},
{
"name": "Courtyard",
"month": 4,
"tours": 12
},
{
"name": "Courtyard",
"month": 5,
"tours": 18
},
{
"name": "Courtyard",
"month": 6,
"tours": 25
},
{
"name": "Courtyard",
"month": 7,
"tours": 40
},
{
"name": "Courtyard",
"month": 8,
"tours": 33
},
{
"name": "Courtyard",
"month": 9,
"tours": 25
},
{
"name": "Courtyard",
"month": 10,
"tours": 21
},
{
"name": "Courtyard",
"month": 11,
"tours": 18
},
{
"name": "Courtyard",
"month": 12,
"tours": 14
},
{
"name": "Renaissance",
"month": 1,
"tours": 10
},
{
"name": "Renaissance",
"month": 2,
"tours": 15
},
{
"name": "Renaissance",
"month": 3,
"tours": 8
},
{
"name": "Renaissance",
"month": 4,
"tours": 12
},
{
"name": "Renaissance",
"month": 5,
"tours": 18
},
{
"name": "Renaissance",
"month": 6,
"tours": 25
},
{
"name": "Renaissance",
"month": 7,
"tours": 40
},
{
"name": "Renaissance",
"month": 8,
"tours": 33
},
{
"name": "Renaissance",
"month": 9,
"tours": 25
},
{
"name": "Renaissance",
"month": 10,
"tours": 21
},
{
"name": "Renaissance",
"month": 11,
"tours": 18
},
{
"name": "Renaissance",
"month": 12,
"tours": 14
}
];
render(toursByHotel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Create new vertical json to horizontal in jquery

I have a JSON like below
var data = [
{ "year": 2013, "month": 10, "week": 41, "changes": 1590 },
{ "year": 2013, "month": 10, "week": 42, "changes": 0 },
{ "year": 2013, "month": 10, "week": 43, "changes": 2008 },
{ "year": 2013, "month": 10, "week": 44, "changes": 3900 },
{ "year": 2014, "month": 10, "week": 41, "changes": 1052 },
{ "year": 2014, "month": 10, "week": 42, "changes": 0 },
{ "year": 2014, "month": 10, "week": 43, "changes": 10122 },
{ "year": 2014, "month": 10, "week": 44, "changes": 1461 },
{ "year": 2015, "month": 10, "week": 41, "changes": 682 },
{ "year": 2015, "month": 10, "week": 42, "changes": 0 },
{ "year": 2015, "month": 10, "week": 43, "changes": 244 },
{ "year": 2015, "month": 10, "week": 44, "changes": 21 }
];
and i want to generate this JSON some thing like that
var firstYear = "2013";
var secondYear = "2014";
var thildYear = "2015";
var sampleData = [
{ "week": 41, "firstYear": 1590, "secondYear": 1052, "thildYear": 682 },
{ "week": 42, "firstYear": 0, "secondYear": 0, "thildYear": 0 },
{ "week": 43, "firstYear": 2008, "secondYear": 10122, "thildYear": 244 },
{ "week": 44, "firstYear": 858, "secondYear": 1461, "thildYear": 21 }
];
i write a code but it does't work
var jsonObjdata = [];
var yearExist = "";
var weekExist = "";
var SampleRequestBody = {};
$.each(data, function (key, value) {
if (value.year != yearExist) {
SampleRequestBody.week = value.week;
SampleRequestBody.firstYear = value.changes;
yearExist = value.year;
}
else if (value.year == yearExist && value.week == weekExist + 1) {
SampleRequestBody.secondYear = value.changes;
}
else if (value.year == yearExist && value.week == weekExist + 1) {
SampleRequestBody.thildYear = value.changes;
jsonObjdata.push(SampleRequestBody);
}
});
Can you please help me ?
Here is another take at it using array.prototype.reduce:
var weeks = [], flatData;
flatData = data.reduce(function(outData, obj) {
var tmp = {}, prop = 'year' + obj.year;
if ((idx = weeks.indexOf(obj.week)) >= 0) {
outData[idx][prop] = obj.changes;
} else {
weeks.push(obj.week);
tmp['week'] = obj.week;
tmp[prop] = obj.changes;
outData.push(tmp);
}
return outData;
}, []);
It will return you an object array like this:
week year2013 year2014 year2015
---- -------- -------- --------
41 1590 1052 682
42 0 0 0
43 2008 10122 244
44 3900 1461 21
Demo Fiddle: http://jsfiddle.net/abhitalks/kLg5f1wk/
(check console)
Demo Snippet:
(check console)
var data = [
{ "year": 2013, "month": 10, "week": 41, "changes": 1590 },
{ "year": 2013, "month": 10, "week": 42, "changes": 0 },
{ "year": 2013, "month": 10, "week": 43, "changes": 2008 },
{ "year": 2013, "month": 10, "week": 44, "changes": 3900 },
{ "year": 2014, "month": 10, "week": 41, "changes": 1052 },
{ "year": 2014, "month": 10, "week": 42, "changes": 0 },
{ "year": 2014, "month": 10, "week": 43, "changes": 10122 },
{ "year": 2014, "month": 10, "week": 44, "changes": 1461 },
{ "year": 2015, "month": 10, "week": 41, "changes": 682 },
{ "year": 2015, "month": 10, "week": 42, "changes": 0 },
{ "year": 2015, "month": 10, "week": 43, "changes": 244 },
{ "year": 2015, "month": 10, "week": 44, "changes": 21 }
], weeks = [], flatData;
flatData = data.reduce(function(outData, obj) {
var tmp = {}, prop = 'year' + obj.year;
if ((idx = weeks.indexOf(obj.week)) >= 0) {
outData[idx][prop] = obj.changes;
} else {
weeks.push(obj.week);
tmp['week'] = obj.week;
tmp[prop] = obj.changes;
outData.push(tmp);
}
return outData;
}, []);
console.table(flatData);
I suggest to use Array.prototype.forEach and Array.prototype.map for creating a temporary object and the later result array.
var data = [{ "year": 2013, "month": 10, "week": 41, "changes": 1590 }, { "year": 2013, "month": 10, "week": 42, "changes": 0 }, { "year": 2013, "month": 10, "week": 43, "changes": 2008 }, { "year": 2013, "month": 10, "week": 44, "changes": 3900 }, { "year": 2014, "month": 10, "week": 41, "changes": 1052 }, { "year": 2014, "month": 10, "week": 42, "changes": 0 }, { "year": 2014, "month": 10, "week": 43, "changes": 10122 }, { "year": 2014, "month": 10, "week": 44, "changes": 1461 }, { "year": 2015, "month": 10, "week": 41, "changes": 682 }, { "year": 2015, "month": 10, "week": 42, "changes": 0 }, { "year": 2015, "month": 10, "week": 43, "changes": 244 }, { "year": 2015, "month": 10, "week": 44, "changes": 21 }],
groups = { '2013': 'firstYear', '2014': 'secondYear', '2015': 'thirdYear' },
temp = {},
result;
data.forEach(function (a) {
temp[a.week] = temp[a.week] || { week: a.week };
temp[a.week][groups[a.year]] = a.changes;
});
result = Object.keys(temp).map(function (k) { return temp[k]; });
document.write('<pre>' + JSON.stringify(result, 0, 4) + '</pre>');
Instead of debugging your code I think a more "algorithmic" approach would be better. Consider this :
function processWeek(week) {
var weekItem = { week: week };
data.forEach(function(item) {
if (item.week == week) switch (item.year) {
case firstYear : weekItem.firstYear = item.changes; break;
case secondYear : weekItem.secondYear = item.changes; break;
case thildYear : weekItem.thildYear = item.changes; break;
default : alert('this will never happen'); break;
}
})
return weekItem;
}
for (var week=41;week<45;week++) {
sampleData.push(processWeek(week));
}
The above produces the desired result -> http://jsfiddle.net/by22q6h8/
The idea is to narrow down the construct of new items to simple steps :
create the item
isolate weeks we are after
determine which changes go to which new attribute.

Need help understanding why I'm required to use JSON.parse()

I have an assignment for my current web development course, my issue is that I cannot see why I need to use JSON.parse() (it's a requirement though). I can guess where it would be used but with experimentation have not managed to render any results.
The general idea is we are drawing information from a JSON array in a separate file (on the same server obviously). This is done through a function contained in an ajax.js file written by the lecturer which is relatively straight forward as follows:
function getJSON(url, callbackFunction) {
//var request = new XMLHttpRequest();
var request = new XMLHttpRequest();
// Work around for browser caching problem that affects some browsers. It prevents
// the browser from using a cached copy that was stored by the browser from another visit.
if (url.indexOf('?') < 0) {
today = new Date();// Add a unique query string to the end of the url
// representing the current time to force the browser to fetch the data
// rather than using a locally cached copy that the browser fetched some earlier time.
url += '?' + today.getTime();
}
request.onreadystatechange = function (){
if (request.readyState === 4 && request.status===200) {
alert("Response Status = " + request.status); // You can safely comment out this line
alert("response = " + request.response); // You can safely comment out this line
alert("response headers = " + request.getAllResponseHeaders()); // You can safely comment out this line
callbackFunction(request.response);
}
};
try {
request.open("POST", url);
request.responseType ="json";
request.send();
}
catch ( exception ) {
alert(exception);
}
}
It uses an XMLHTTPRequest function.
The callback function in this case is as follows at present:
function displayAllGames(results) {
alert('ready to start work');
var gamesArray = results.games;
var myHTML = '<table id="table1" border="1">';
for (var counter = 0; counter < gamesArray.length; counter++) {
var game = gamesArray[counter];
var venue = game.venue;
var round = game.round;
var date = new Date(game.date);
var homeTeam = game.homeTeam.name;
var awayTeam = game.awayTeam.name;
myHTML += '<tr>';
myHTML += '<td>' + round + '</td>';
myHTML += '<td>' + venue + '</td>';
myHTML += '<td>' + date.toLocaleDateString() + '</td>';
myHTML += '<td>' + homeTeam + '</td>';
myHTML += '<td>' + awayTeam + '</td>';
myHTML += '</tr>';
}
myHTML += '</table>';
var targetElement = document.getElementById('happyPlace');
targetElement.innerHTML = myHTML;
}
When adding code for a JSON.parse() even as an extra at the end of the document nothing happens. The code as follows:
var parsedData = JSON.parse(gamesArray);
alert(parsedData[1]);
However no alert comes up and even when trying to write the single item to the end of the document with document.write nothing occurs. Can someone please explain what I'm doing wrong? It's driving me nuts.
JSON Content:
{
"games": [
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 11,
"points": 9
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 24,
"points": 10
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 18,
"points": 19
},
"awayTeam":
{
"name": "South Bendigo",
"goals": 3,
"points": 7
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 10,
"points": 5
},
"awayTeam":
{
"name": "Kyneton",
"goals": 19,
"points": 11
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 14:20:00",
"venue": "Golden Square",
"homeTeam":
{
"name": "Golden Square",
"goals": 16,
"points": 10
},
"awayTeam":
{
"name": "Kangaroo Flat",
"goals": 9,
"points": 10
}
},
{
"round": 1,
"date": "Fri, 3 Apr 2015 17:30:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "Sandhurst",
"goals": 10,
"points": 9
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 11,
"points": 16
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 25,
"points": 22
},
"awayTeam":
{
"name": "Maryborough",
"goals": 7,
"points": 3
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 14:20:00",
"venue": "Kennington",
"homeTeam":
{
"name": "South Bendigo",
"goals": 10,
"points": 6
},
"awayTeam":
{
"name": "Golden Square",
"goals": 15,
"points": 18
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 14:20:00",
"venue": "Kyneton",
"homeTeam":
{
"name": "Kyneton",
"goals": 15,
"points": 11
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 22,
"points": 30
}
},
{
"round": 2,
"date": "Sat, 11 Apr 2015 17:30:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 12,
"points": 12
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 11,
"points": 10
}
},
{
"round": 2,
"date": "Sun, 12 Apr 2015 14:20:00",
"venue": "Strathfieldsaye",
"homeTeam":
{
"name": "Strathfieldsaye",
"goals": 16,
"points": 16
},
"awayTeam":
{
"name": "Eaglehawk",
"goals": 11,
"points": 7
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 12,
"points": 14
},
"awayTeam":
{
"name": "Kangaroo Flat",
"goals": 14,
"points": 13
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Castlemaine",
"homeTeam":
{
"name": "Castlemaine",
"goals": 12,
"points": 13
},
"awayTeam":
{
"name": "Gisborne",
"goals": 10,
"points": 10
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 20,
"points": 21
},
"awayTeam":
{
"name": "Kyneton",
"goals": 10,
"points": 8
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Golden Square",
"homeTeam":
{
"name": "Golden Square",
"goals": 6,
"points": 8
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 13,
"points": 13
}
},
{
"round": 3,
"date": "Sat, 18 Apr 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "Sandhurst",
"goals": 20,
"points": 17
},
"awayTeam":
{
"name": "South Bendigo",
"goals": 8,
"points": 3
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 9,
"points": 4
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 25,
"points": 26
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 26,
"points": 14
},
"awayTeam":
{
"name": "Kangaroo Flat",
"goals": 7,
"points": 3
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Strathfieldsaye",
"homeTeam":
{
"name": "Strathfieldsaye",
"goals": 10,
"points": 15
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 3,
"points": 6
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 9,
"points": 13
},
"awayTeam":
{
"name": "Golden Square",
"goals": 11,
"points": 10
}
},
{
"round": 4,
"date": "Sat, 25 Apr 2015 17:30:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "South Bendigo",
"goals": 6,
"points": 11
},
"awayTeam":
{
"name": "Kyneton",
"goals": 10,
"points": 11
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Castlemaine",
"homeTeam":
{
"name": "Castlemaine",
"goals": 10,
"points": 8
},
"awayTeam":
{
"name": "Eaglehawk",
"goals": 9,
"points": 15
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Strathfieldsaye",
"homeTeam":
{
"name": "Strathfieldsaye",
"goals": 24,
"points": 24
},
"awayTeam":
{
"name": "Maryborough",
"goals": 5,
"points": 2
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Golden Square",
"homeTeam":
{
"name": "Golden Square",
"goals": 17,
"points": 10
},
"awayTeam":
{
"name": "Kyneton",
"goals": 7,
"points": 6
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "South Bendigo",
"goals": 12,
"points": 19
},
"awayTeam":
{
"name": "Gisborne",
"goals": 4,
"points": 6
}
},
{
"round": 5,
"date": "Sat, 2 May 2015 17:30:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 7,
"points": 8
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 17,
"points": 24
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Maryborough",
"homeTeam":
{
"name": "Maryborough",
"goals": 6,
"points": 6
},
"awayTeam":
{
"name": "Golden Square",
"goals": 27,
"points": 26
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 11,
"points": 9
},
"awayTeam":
{
"name": "South Bendigo",
"goals": 8,
"points": 11
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 9,
"points": 4
},
"awayTeam":
{
"name": "Eaglehawk",
"goals": 19,
"points": 17
}
},
{
"round": 6,
"date": "Sat, 9 May 2015 14:20:00",
"venue": "Kyneton",
"homeTeam":
{
"name": "Kyneton",
"goals": 5,
"points": 8
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 20,
"points": 18
}
},
{
"round": 6,
"date": "Sun, 10 May 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "Sandhurst",
"goals": 16,
"points": 17
},
"awayTeam":
{
"name": "Castlemaine",
"goals": 3,
"points": 7
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Kangaroo Flat",
"homeTeam":
{
"name": "Kangaroo Flat",
"goals": 9,
"points": 12
},
"awayTeam":
{
"name": "Strathfieldsaye",
"goals": 13,
"points": 11
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Castlemaine",
"homeTeam":
{
"name": "Castlemaine",
"goals": 18,
"points": 9
},
"awayTeam":
{
"name": "Kyneton",
"goals": 21,
"points": 13
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Eaglehawk",
"homeTeam":
{
"name": "Eaglehawk",
"goals": 8,
"points": 11
},
"awayTeam":
{
"name": "Golden Square",
"goals": 10,
"points": 14
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Gisborne",
"homeTeam":
{
"name": "Gisborne",
"goals": 1,
"points": 4
},
"awayTeam":
{
"name": "Sandhurst",
"goals": 17,
"points": 25
}
},
{
"round": 7,
"date": "Sat, 16 May 2015 14:20:00",
"venue": "Queen Elizabeth Oval",
"homeTeam":
{
"name": "South Bendigo",
"goals": 25,
"points": 18
},
"awayTeam":
{
"name": "Maryborough",
"goals": 5,
"points": 6
}
}
}
From what I can understand you should use JSON.parse if the results is not an object, but a string variable holding a valid JSON. This way you could use the Javacript object and do whatever you like.

Categories