We Keep Coding

Javascript Filtering Array of Objects using Filter Question

I have 2 arrays of objects. Seen below
var subs = new Array();
var list_items = new Array();
subs = [
{ "value": 3, "text": "Guyana" },
{ "value": 4, "text": "St Lucia" },
{ "value": 5, "text": "Suriname" },
{ "value": 6, "text": "Barbados" },
{ "value": 7, "text": "3rd Party" },
{ "value": 8, "text": "JDL" }
];
list_items = [
{ "Id": 168, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 3, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 169, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 4, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 170, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 6, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 171, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 5, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }
];
What I'm trying to do is filter the "Subs" array, where any objects in the "list_items" array with the attribute ("StageRecipNum" matching the Subs "value" and "Resent" = false) should be removed from "Subs".
Here is the code I have to try to do this.
for (var i = 0; i < subs.length; i++) {
for (var j = 0; j < list_items.length; j++) {
if (parseInt(subs[i].value) == parseInt(list_items[j].StageRecipNum) &&
list_items[j].Resent == false) {
var hold = parseInt(list_items[j].StageRecipNum);
subs = subs.filter(el => el.value !== hold);
console.log(subs);
}
}
}
Afterward I am taking the remaining "Subs" array items and putting it in a dropdownlist to display on a form. All that works, the issue I am having is that one of the items in the list_items array keeps returning in the dropdownlist when it's not supposed to be there.
In the java console of visual studio code using Quokka, I get the below
As you can see, number 6 which is Barbados is not supposed to be there. I can't figure out why it's there and all the rest that not supposed to be in the array are not there. Only the 3rd Party and JDL supposed to be on the list.
I need help. What did I do wrong?

You can apply filter with some on the second array by matching StageRecipNum with value and resent property to be false. and once found take negate of some. Something like this:
const subs = [ { "value": 3, "text": "Guyana" }, { "value": 4, "text": "St Lucia" }, { "value": 5, "text": "Suriname" }, { "value": 6, "text": "Barbados" }, { "value": 7, "text": "3rd Party" }, { "value": 8, "text": "JDL" } ];
const list_items = [ { "Id": 168, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 3, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }, { "Id": 169, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 4, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }, { "Id": 170, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 6, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }, { "Id": 171, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 5, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" } ];
const result = subs.filter(a=>!list_items.some(b=>b.StageRecipNum===a.value && b.Resent===false));
console.log(result);

You could take a Set and filter the array.
const
subs = [{ value: 3, text: "Guyana" }, { value: 4, text: "St Lucia" }, { value: 5, text: "Suriname" }, { value: 6, text: "Barbados" }, { value: 7, text: "3rd Party" }, { value: 8, text: "JDL" }],
list_items = [{ Id: 168, Month: "May", Resent: false, Stage: "2", StageRecipNum: 3, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }, { Id: 169, Month: "May", Resent: false, Stage: "2", StageRecipNum: 4, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }, { Id: 170, Month: "May", Resent: false, Stage: "2", StageRecipNum: 6, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }, { Id: 171, Month: "May", Resent: false, Stage: "2", StageRecipNum: 5, Title: "Demand_Forecast_2020_Month_May", parentID: "51" }],
values = new Set(list_items.map(({ StageRecipNum }) => StageRecipNum)),
result = subs.filter(({ value }) => !values.has(value));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

The problem arises because you are altering the array which you are looping over. The loop ends prematurely, because the length of the array is no longer the original length after removing items, resulting in not evaluating the remaining items.
To keep using the same code, keep updating a copy of the array while keeping the subs variable in its original state.
Below a less verbose way of achieving the same result. Filter the list_items for values where Resent is false and select its StageRecipNum. Next, filter the subs for values where the value is not contained by the list items:
var subs = [
{ "value": 3, "text": "Guyana" },
{ "value": 4, "text": "St Lucia" },
{ "value": 5, "text": "Suriname" },
{ "value": 6, "text": "Barbados" },
{ "value": 7, "text": "3rd Party" },
{ "value": 8, "text": "JDL" }
];
var list_items = [
{ "Id": 168, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 3, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 169, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 4, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 170, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 6, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" },
{ "Id": 171, "Month": "May", "Resent": false, "Stage": "2", "StageRecipNum": 5, "Title": "Demand_Forecast_2020_Month_May", "parentID": "51" }
];
var list_item_nums = list_items.filter(x => !x.Resent).map(x => x.StageRecipNum);
var filtered_subs = subs.filter(x => !list_item_nums.includes(x.value));
console.log(filtered_subs);

How to Show Same Month name of two years in X axis of Highcharts

I have a Highcharts chart in my application. I need to display how many cars have been sold in each month of the year and this chart shows car selling over 13 months time period(Ex: June 2017- June 2018) so that same month(of two years) is displayed two times. X category should be something like (Jun, Jul, Aug, Sep, Oct, Nov, Dec, Jan, Feb, Mar, Apr, May, Jun)
But the problem is chart shows only one "Jun" month in the graph. I think category name duplication is the error. Is there a workaround for this to get done?
Here is what I have tried so far:
// Create the chart
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Car Sales'
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total percent car salee'
}
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.1f}%'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
"series": [
{
"name": "Browsers",
"colorByPoint": true,
"data": [
{
"name": "January",
"y": 62.74,
},
{
"name": "February",
"y": 10.57,
},
{
"name": "March",
"y": 7.23,
},
{
"name": "April",
"y": 5.58,
},
{
"name": "May",
"y": 4.02,
},
{
"name": "June",
"y": 1.92,
},
{
"name": "July",
"y": 7.62,
},
{
"name": "August",
"y": 7.62,
},
{
"name": "September",
"y": 7.62,
},
{
"name": "October",
"y": 7.62,
},
{
"name": "November",
"y": 7.62,
},
{
"name": "December",
"y": 7.62,
},
{
"name": "January",
"y": 7.62,
}
]
}
],
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JSfiddle link: https://jsfiddle.net/yasirunilan/2ryfnv3q/

The easiest way to get to achieve this inside the drilldown, is to 'cheat' with the name of the category. If you are able to add in a space (or any other random character) at the end of the second Jan in the drilldown, it will solve the problem.
Click here for a fiddle demonstrating the solution.
"drilldown": {
"series": [
{
"name": "Chrome",
"id": "Chrome",
"data": [
{
"name": "Jan",
"y": 0.1
},
{
"name": "Feb",
"y": 0.1
},
//snip
{
"name": "Jan ",
"y": 0.1
}
]
},

Group data based on property javascript

I have json array as follows,
{
"lstMonths": [
"September"
],
"lstBalances": [
{
"AccountName": "john",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "-28.11"
}
]
},
{
"AccountName": "sanga\n",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "100"
}
]
},
{
"AccountName": "mahela",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "400"
}
]
},
{
"AccountName": "sachin",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "600"
}
]
},
{
"AccountName": "dhoni",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "-500"
}
]
}
]
}
i want to group by AccountName and form the output as,
{ data: [28.11], label: 'john' },
{ data: [100], label: 'sanga' },
{ data: [400], label: 'mahela' },
{ data: [400], label: 'sachin' }
{ data: [400], label: 'dhoni' }
if there are two months, say october in above then
{ data: [28.11,3], label: 'john' },
{ data: [100,4], label: 'sanga' },
{ data: [400,4], label: 'mahela' },
{ data: [400,4], label: 'sachin' }
{ data: [400,5], label: 'dhoni' }
i tried to group like as above. any help guys?
here is my code:
var groupBy = function(xs, key) {
return xs.reduce(function(rv, x) {
(rv[x[key]] = rv[x[key]] || []).push(x);
return rv;
}, {});
};
console.log(groupBy(response.lstMonths, 'length'));
please provide a way to find the best value.
EDIT
json for more months,
{ "lstMonths": [
"September" ], "lstBalances": [
{
"AccountName": "john\n",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "-28.11"
},
{
"MonthName": "August",
"Amount": "-28.11"
}
]
},
{
"AccountName": "sanga\n",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "100"
},
{
"MonthName": "August",
"Amount": "233"
}
]
},
{
"AccountName": "mahela",
"AccountBalanceOnMonth": [
{
"MonthName": "September",
"Amount": "400"
},
{
"MonthName": "August",
"Amount": "32"
}
]
} ] }

Assuming,
only one array with data,
for every month is a value,
all months are sorted
result months should have the same sorting,
then you could take the array with accounts and iterate the accounts for building a new object for each account and take the balance values for the data array.
var data = [{ lstMonths: ["September"], lstBalances: [{ AccountName: "john", AccountBalanceOnMonth: [{ MonthName: "September", Amount: "-28.11" }, { MonthName: "August", Amount: "-28.11" }] }, { AccountName: "sanga", AccountBalanceOnMonth: [{ MonthName: "September", Amount: "100" }, { MonthName: "August", Amount: "233" }] }, { AccountName: "mahela", AccountBalanceOnMonth: [{ MonthName: "September", Amount: "400" }, { MonthName: "August", Amount: "32" }] }] }],
grouped = data[0].lstBalances.map(function (o) {
return {
data: o.AccountBalanceOnMonth.map(function (p) { return +p.Amount; }),
label: o.AccountName
};
});
console.log(grouped);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Can we manage multiple highchart charts in a single function by changing type in chart drawing functionm

Is possible to group types of charts in high charts.?
I have json data, which I want to express in chart type. And also there is range slider.I need to give a option to select chart type by the end user. I have a dropdown list in which I populate some chart types like bar,pie,line etc. when user selects an option that corresponding chart type should be displayed. Is that possible with highchart?
Fiddle: http://jsfiddle.net/rahulsankarer/BqHLz/
Highcharts.setOptions({
chart: {
borderWidth: 5,
borderColor: '#e8eaeb',
borderRadius: 0,
backgroundColor: '#f7f7f7'
},
title: {
style: {
'fontSize': '1em'
},
useHTML: true,
x: -27,
y: 8,
text: 'Report'
}
});
var blogComments = [
{
"Name": "John",
"Month": "Jan",
"TotalWorkingDay": 12,
"Attendance": 1,
"Leave": 1
}, {
"Name": "John",
"Month": "Feb",
"TotalWorkingDay": 8,
"Attendance": 2,
"Leave": 1
},
{
"Name": "John",
"Month": "March",
"TotalWorkingDay": 10,
"Attendance": 0,
"Leave": 0
},
{
"Name": "John",
"Month": "April",
"TotalWorkingDay": 11,
"Attendance": 0,
"Leave": 0
},
{
"Name": "John",
"Month": "May",
"TotalWorkingDay": 8,
"Attendance": 0,
"Leave": 1
},
{
"Name": "David",
"Month": "Jan",
"TotalWorkingDay": 8,
"Attendance": 2,
"Leave": 3
},
{
"Name": "David",
"Month": "Feb",
"TotalWorkingDay": 5,
"Attendance": 1,
"Leave": 0
},
{
"Name": "David",
"Month": "March",
"TotalWorkingDay": 4,
"Attendance": 2,
"Leave": 0
},
{
"Name": "David",
"Month": "April",
"TotalWorkingDay": 1,
"Attendance": 1,
"Leave": 0
},
{
"Name": "David",
"Month": "May",
"TotalWorkingDay": 8,
"Attendance": 2,
"Leave": 0
},
{
"Name": "Sam",
"Month": "Jan",
"TotalWorkingDay": 7,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "Feb",
"TotalWorkingDay": 6,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "March",
"TotalWorkingDay": 11,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "April",
"TotalWorkingDay": 9,
"Attendance": 0,
"Leave": 0
},
{
"Name": "Sam",
"Month": "May",
"TotalWorkingDay": 2,
"Attendance": 0,
"Leave": 0
}
];
var newSeriesTotalWorkingDay = {
name: 'TotalWorkingDay',
data: []
};
var newSeriesAttendance = {
name: 'Attendance',
data: []
};
var newSeriesLeave = {
name: 'Leave',
data: []
};
var userNames = [];
var userNameMonths = [];
$.each(blogComments, function (index, User) {
// get the series
newSeriesTotalWorkingDay.data.push(User.TotalWorkingDay);
newSeriesAttendance.data.push(User.Attendance);
newSeriesLeave.data.push(User.Leave);
// Get the usernames
if (userNames[User.Name]) {
if (userNames[User.Name]['months']) {
userNames[User.Name]['months'][User.Month] = User.Month;
}
} else {
userNames[User.Name] = {
'months': []
};
userNames[User.Name]['months'][User.Month] = User.Month;
}
});
//console.log(userNames);
var newCategories = [];
for (var name in userNames) {
if (userNames.hasOwnProperty(name)) {
var tempObj = {}
tempObj.name = name;
tempMonths = userNames[name]['months'].sort();
tempObj.categories = [];
for (var month in tempMonths) {
tempObj.categories.push({
name: month
});
}
newCategories.push(tempObj);
}
}
window.chart = new Highcharts.Chart({
chart: {
renderTo: "chart-more",
type: "column"
},
series: [newSeriesTotalWorkingDay, newSeriesAttendance, newSeriesLeave],
xAxis: {
categories: newCategories
}
});
<div>
<label>Select Chart Type :</label>
<select>
<option value="line">Line</option>
<option value="area">Area</option>
<option value="bar">Bar</option>
<option value="audi">Audi</option>
</select>
</div>

Demo: http://jsfiddle.net/robschmuecker/Umx5X/
Here I have demonstrated how you can listen to both the select change event and a click on the images to change the chart type dynamically.
$(document).ready(function () {
var initialChartType = 'area';
$('#top10_update').val(initialChartType);
var chartSelector = '#top10';
function changeChartType(myType) {
$(chartSelector).highcharts().series[0].update({
type: myType
});
}
$('#top10_update').on('change', function () {
var type = $(this).val();
changeChartType(type);
});
$('.set-chart').on('click', function () {
var type = $(this).data('chart-type');
changeChartType(type);
});
$(chartSelector).highcharts({
chart: {
type: initialChartType,
margin: [50, 50, 100, 80]
},
title: {
text: 'TOP10'
},
subtitle: {
text: ' '
},
credits: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4'],
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
min: 0,
title: {
text: 'Ilość'
}
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
'Ilość: ' + this.y;
}
},
series: [{
name: 'Ilość zgłoszeń, TOP10',
data: [1, 2, 3, 43],
dataLabels: {
enabled: true,
rotation: -90,
color: '#FFFFFF',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
}]
});
function ajax_update(date) {
$.ajax({
url: "index.php/ajax",
async: false,
method: 'post',
dataType: "json",
data: {
date: date
},
beforeSend: function () {
$('#loading').show();
$('#top10').highcharts().showLoading();
},
success: function (dane) {
$('#top10').highcharts().xAxis[0].setCategories(dane.top10.xlabel, false);
$('#top10').highcharts().series[0].setData(dane.top10.data);
$('#top10').highcharts().setTitle(null, {
text: 'Dane za: ' + date.replace('^', ' - ')
});
$('#top10').highcharts().hideLoading();
$('#loading').hide();
},
error: function (dane) {
alert(dane.responseText);
}
});
}
});

I recommend you to visit our demo:
http://jsfiddle.net/tZUp4/
which uses a series.update

How to convert json of one format to another format

I have a json like
var UserMatrix =[{
ID: 1,
Name: "Sid Edelmann",
UPI: 20483,
Guru: "Yes",
Views: {
February: 12,
March: 8,
April: 10,
May: 11,
June: 8
},
Ratings: {
February: 1,
March: 2,
April: 0,
May: 0,
June: 0
},
Comments: {
February: 1,
March: 1,
April: 0,
May: 0,
June: 1
},
TotalViews: {
FebJune: 49
},
TotalRatings: {
FebJune: 3
},
AverageRatings: {
FebJune: '#'
},
TotalComments: {
FebJune: 3
}
},
{
ID: 6,
Name: "Parthasarathy Perumbali",
UPI: "999999",
Guru: "",
Views: {
February: "8",
March: "5",
April: "4",
May: "1",
June: "8"
},
Ratings: {
February: "2",
March: "1",
April: "2",
May: "1",
June: "2"
},
Comments: {
February: "3",
March: "0",
April: "0",
May: "0",
June: "0"
},
TotalViews: {
FebJune: "26"
},
TotalRatings: {
FebJune: "8"
},
AverageRatings: {
FebJune: "#"
},
TotalComments: {
FebJune: "3"
}
}
];
I want to convert this json to the following. How can I do this?
var blogComments = [
{
"Name": "Sid Edelmann",
"Month": "Feb",
"Views": 12,
"Ratings": 1,
"Comments": 1
}, {
"Name": "Sid Edelmann",
"Month": "Mar",
"Views": 8,
"Ratings": 2,
"Comments": 1
},
{
"Name": "Sid Edelmann",
"Month": "Apr",
"Views": 10,
"Ratings": 0,
"Comments": 0
},
{
"Name": "Sid Edelmann",
"Month": "May",
"Views": 11,
"Ratings": 0,
"Comments": 0
},
{
"Name": "Sid Edelmann",
"Month": "Jun",
"Views": 8,
"Ratings": 0,
"Comments": 1
},
{
"Name": "Parthasarathy Perumbali",
"Month": "Feb",
"Views": 8,
"Ratings": 2,
"Comments": 3
},
{
"Name": "Parthasarathy Perumbali",
"Month": "Mar",
"Views": 5,
"Ratings": 1,
"Comments": 0
},
{
"Name": "Parthasarathy Perumbali",
"Month": "Apr",
"Views": 4,
"Ratings": 2,
"Comments": 0
},
{
"Name": "Parthasarathy Perumbali",
"Month": "May",
"Views": 1,
"Ratings": 1,
"Comments": 0
},
{
"Name": "Parthasarathy Perumbali",
"Month": "Jun",
"Views": 8,
"Ratings": 2,
"Comments": 0
}
];

I made following code to work without jQuery.
The code contains comments so it is pretty self-explanatory. As a special note, my code works even if you have different number of months for different matrix entries as long as Views, Ratings and Comments has same amount of months inside one entry. I wanted to make this to work like this, because it is less hard-coded way of doing things.
See Js fiddle example and remember to open your developer console to see the results.
The code is also here, below:
// UserMatrix data....
var UserMatrix =[{
ID: 1,
Name: "Sid Edelmann",
UPI: 20483,
Guru: "Yes",
Views: {
February: 12,
March: 8,
April: 10,
May: 11,
June: 8
},
Ratings: {
February: 1,
March: 2,
April: 0,
May: 0,
June: 0
},
Comments: {
February: 1,
March: 1,
April: 0,
May: 0,
June: 1
},
TotalViews: {
FebJune: 49
},
TotalRatings: {
FebJune: 3
},
AverageRatings: {
FebJune: '#'
},
TotalComments: {
FebJune: 3
}
},
{
ID: 6,
Name: "Parthasarathy Perumbali",
UPI: "999999",
Guru: "",
Views: {
February: "8",
March: "5",
April: "4",
May: "1",
June: "8"
},
Ratings: {
February: "2",
March: "1",
April: "2",
May: "1",
June: "2"
},
Comments: {
February: "3",
March: "0",
April: "0",
May: "0",
June: "0"
},
TotalViews: {
FebJune: "26"
},
TotalRatings: {
FebJune: "8"
},
AverageRatings: {
FebJune: "#"
},
TotalComments: {
FebJune: "3"
}
}
];
/**
* Yay! Method for converting UserMatrix to blogComments
*
*/
function convertUserMatrixToBlogComments() {
// Final format
var blogComments = [],
// Current matrix entry
userMatrix,
// Months
months = {};
// Loop each object in UserMatrix
for(var i=0; i < UserMatrix.length; i++) {
// Current
userMatrix = UserMatrix[i];
// Find out months
for (var m in userMatrix.Views) {
if(userMatrix.Views.hasOwnProperty(m)) {
// Makes container for months
// e.g. February: "Feb"
months[m] = m.substring(0, 3);
}
};
// Go through all matrix data for months and push to comments
for(var j in months) {
if(months.hasOwnProperty(j)) {
blogComments.push({
Name: userMatrix.Name,
Month: months[j],
Views: parseInt(userMatrix.Views[j], 10),
Ratings: parseInt(userMatrix.Ratings[j], 10),
Comments: parseInt(userMatrix.Comments[j], 10)
});
}
}
// Next cycle starts here..
months = {};
}
// We are done!
return blogComments;
}
// Lets do this!
var blogComments = convertUserMatrixToBlogComments();
// See the results
console.log(blogComments);

Here you go.
newUsers = [];
$.each(UserMatrix, function (i, user) {
$.each(user.Views, function(key, value){
newUser = {};
newUser['Name'] = user['Name'];
newUser['Month'] = key;
newUser['Views'] = value;
newUser['Ratings'] = user.Ratings[key];
newUser['Comments'] = user.Comments[key];
newUsers.push(newUser);
});
});
console.log(JSON.stringify(newUsers));
Demo: http://jsfiddle.net/robschmuecker/Bc4hw/
Outputs:
[{
"Name": "Sid Edelmann",
"Month": "February",
"Views": 12,
"Ratings": 1,
"Comments": 1
}, {
"Name": "Sid Edelmann",
"Month": "March",
"Views": 8,
"Ratings": 2,
"Comments": 1
}, {
"Name": "Sid Edelmann",
"Month": "April",
"Views": 10,
"Ratings": 0,
"Comments": 0
}, {
"Name": "Sid Edelmann",
"Month": "May",
"Views": 11,
"Ratings": 0,
"Comments": 0
}, {
"Name": "Sid Edelmann",
"Month": "June",
"Views": 8,
"Ratings": 0,
"Comments": 1
}, {
"Name": "Parthasarathy Perumbali",
"Month": "February",
"Views": "8",
"Ratings": "2",
"Comments": "3"
}, {
"Name": "Parthasarathy Perumbali",
"Month": "March",
"Views": "5",
"Ratings": "1",
"Comments": "0"
}, {
"Name": "Parthasarathy Perumbali",
"Month": "April",
"Views": "4",
"Ratings": "2",
"Comments": "0"
}, {
"Name": "Parthasarathy Perumbali",
"Month": "May",
"Views": "1",
"Ratings": "1",
"Comments": "0"
}, {
"Name": "Parthasarathy Perumbali",
"Month": "June",
"Views": "8",
"Ratings": "2",
"Comments": "0"
}]

This should work for you
var result = [];
UserMatrix.forEach(function (user) {
var allMonths = Object.keys(user.Views);
allMonths.forEach(function(month){
var monthObject = {};
monthObject["Name"] = user.Name;
monthObject["Month"] = month.slice(0,3);
monthObject["Views"] = user.Views[month];
monthObject["Ratings"] = user.Ratings[month];
monthObject["Comments"] = user.Comments[month];
result.push(monthObject);
});
})
console.log(result);

Fiddle
var finalArr = [];
var months = ["February", "March", "April", "May", "June"];
UserMatrix.forEach(function (user) {
months.forEach(function (m) {
finalArr.push({
Name: user.Name,
Month: m,
Views: user.Views[m],
Ratings: user.Ratings[m],
Comments: user.Comments[m]
});
});
});
document.getElementById('op').innerHTML = JSON.stringify(finalArr);
console.log(finalArr);
Update
Specifying the months and attributes within an array might give you more flexibility while enhancing your application.
Fiddle
var finalArr = [];
var months = ["February", "March", "April", "May", "June"];
var attr = ["Views", "Ratings", "Comments"];
UserMatrix.forEach(function (user) {
months.forEach(function (m) {
var newObj = {};
newObj.Name=user.Name;
newObj.Month = m;
attr.forEach(function (a) {
newObj[a]=user[a][m];
});
finalArr.push(newObj);
});
});
document.getElementById('op').innerHTML = JSON.stringify(finalArr);
console.log(JSON.stringify(finalArr));