We Keep Coding

change value based on nested array value

I got a below object from the API
let response = {
"id": 301344576,
"quantity": 92,
"unlimited": false,
"inStock": true,
"name": "Virgin Coconut Oil",
"price": 328.47,
"isShippingRequired": true,
"weight": 0.5,
"url": "https://subhikshaf2c.company.site/Virgin-Coconut-Oil-p301344576",
"options": [
{
"type": "SELECT",
"name": "Weight",
"nameTranslated": {
"en": "Weight"
},
"choices": [
{
"text": "500 gm",
"textTranslated": {
"en": "500 gm"
},
"priceModifier": 0,
"priceModifierType": "ABSOLUTE"
},
{
"text": "1 kg",
"textTranslated": {
"en": "1 kg"
},
"priceModifier": 317.03,
"priceModifierType": "ABSOLUTE"
}
],
"defaultChoice": 0,
"required": false
}
],
"combinations": [
{
"id": 161026822,
"combinationNumber": 1,
"options": [
{
"name": "Weight",
"nameTranslated": {
"en": "Weight"
},
"value": "1 kg",
"valueTranslated": {
"en": "1 kg"
}
}
],
"sku": "OL002-001592-1kg",
"quantity": 36,
"inStock": true,
"unlimited": false,
"weight": 1,
"warningLimit": 20,
"attributes": [],
"defaultDisplayedPrice": 677.78,
"defaultDisplayedPriceFormatted": "₹677.78"
}
]
}
and the weight info of this. Suppose i got 1KG so i'm creating JSON like
{
"Id":301344576,
"weight":"1 kg",
"quantity":1
}
In another page again I'm calling the same API and need to create json format like
[
{
"stock": 92,
"quantity": 1,
"productId": 301344576,
"basePrice": 328.47,
"productPrice": 344.89,
"weight": "500 gm",
"productName": "Virgin Coconut Oil",
}
]
The problem is if the weight: '1KG' i need to look into the combinations and need to update the quantity. So my json will become like
{
"stock": 36,
"quantity": 1,
"productId": 301344576,
"basePrice": 645.5,
"productPrice": 344.89,
"weight": "1 kg",
"productName": "Virgin Coconut Oil",
}
for the basePrice, I'm doing price+priceModifier value of selected weight from the options.
How can i achieve the desired result.

How I can make slices a link in FusionChart js multilevelpie?

I want make clickable links in pie chart.
I used FusionCharts.js. How I make links in chart?
For example (FusionChart.js create multilevelpie chart with slices "seafood", "breads", "clothing", "sun glasses", "food & beverages", "apparel & accessories"):
FusionCharts.ready(function() {
var topProductsChart = new FusionCharts({
type: 'multilevelpie',
renderAt: 'chart-container',
id: "myChart",
width: '400',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Split of Top Products Sold",
"subCaption": "Last Quarter",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"basefontsize": "9",
"subcaptionFontBold": "0",
"bgColor": "#ffffff",
"canvasBgColor": "#ffffff",
"showBorder": "0",
"showShadow": "0",
"showCanvasBorder": "0",
"pieFillAlpha": "60",
"pieBorderThickness": "2",
"hoverFillColor": "#cccccc",
"pieBorderColor": "#ffffff",
"useHoverColor": "1",
"showValuesInTooltip": "1",
"showPercentInTooltip": "0",
"numberPrefix": "$",
"plotTooltext": "$label, $$valueK, $percentValue",
"pieRadius": "170"
},
"category": [{
"label": "Sales by category",
"color": "#ffffff",
"value": "150",
"category": [{
"label": "Food & {br}Beverages",
"color": "#f8bd19",
"value": "55.5",
"category": [{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1"
},
{
"label": "Seafood",
"color": "#f8bd19",
"value": "6.66"
}
]
},
{
"label": "Apparel &{br}Accessories",
"color": "#e44a00",
"value": "42",
"category": [{
"label": "Sun Glasses",
"color": "#e44a00",
"value": "10.08"
},
{
"label": "Clothing",
"color": "#e44a00",
"value": "18.9"
},
]
},
]
}]
}
});
topProductsChart.render();
});
Live demo: http://jsfiddle.net/cebu68vt/
I want this slices, for example - "Breads", be a clickable link.

In order to set a link to a specific Pie plot please set link attribute for that data object here is an example
{
"label": "Breads",
"color": "#f8bd19",
"value": "11.1",
"link":"https://www.fusioncharts.com/dev"
}
Check this demo - http://jsfiddle.net/byzre3vj/
To know more about this feature check here - https://www.fusioncharts.com/dev/chart-guide/chart-configurations/drill-down

Complex Grid in Ext.js

I try to create a complex grid in Ext.js in MVC architecture.
Lets say i have 2 JSON´s like that:
First:
[{
"id": 2,
"name": "An ice sculpture",
"price": 12.50,
"tags": ["cold", "ice"],
"dimensions": {
"length": 7.0,
"width": 12.0,
"height": 9.5
},
"warehouseLocation": {
"latitude": -78.75,
"longitude": 20.4
}
},
{
"id": 3,
"name": "A blue mouse",
"price": 25.50,
"dimensions": {
"length": 3.1,
"width": 1.0,
"height": 1.0
},
"warehouseLocation": {
"latitude": 54.4,
"longitude": -32.7
}
}]
Second
[{
"id": 4,
"name": "An ice sculpture",
"price": 14.50,
"tags": ["cold", "ice"],
"dimensions": {
"length": 12.0,
"width": 33.0,
"height": 9.5
},
"warehouseLocation": {
"latitude": 54.75,
"longitude": 21.4
}}]
Now i want to create a grid like that:
A column which shows in the first row the "length" of Object "id":2, in the second row the "length" of Object "id":3 and in the third row the "length" of Object "id":4.
I hope there are some suggestions...

Recursive function not returning sum of object values

Why sum is undefined. What am I doing wrong?
var testData1 = [{
"name": "Doctors",
"category": "Doctors",
"subCategory": [{
"name": "Likes",
"category": "Likes",
"subCategory": [{
"name": "Visit",
"category": "Visit",
"subCategory": [{
"name": "Charges",
"category": "Charges",
"subCategory": null,
"val": 30
}]
}]
}, {
"name": "Dislikes",
"category": "Dislikes",
"subCategory": [{
"name": "Quality",
"category": "Quality",
"subCategory": [{
"name": "Appointment",
"category": "Appointment",
"subCategory": null,
"val": 50
}, {
"name": "Care",
"category": "Care",
"subCategory": null,
"val": 70
}, {
"name": "Attentive ",
"category": "Attentive ",
"subCategory": null,
"val": 90
}]
}]
}, {
"name": "Neutral",
"category": "Neutral",
"subCategory": [{
"name": "Professional ",
"category": "Professional ",
"subCategory": [{
"name": "Ease",
"category": "Ease",
"subCategory": null,
"val": 50
}, {
"name": "Competent ",
"category": "Competent ",
"subCategory": null,
"val": 40
}, {
"name": "Availability",
"category": "Availability",
"subCategory": null,
"val": 80
}]
}]
}],
"index": 6
}, {
"name": "Service",
"category": "Service",
"subCategory": [{
"name": "Likes",
"category": "Likes",
"subCategory": [{
"name": "Environment",
"category": "Environment",
"subCategory": [{
"name": "Professionalism ",
"category": "Professionalism ",
"subCategory": null,
"val": 50
}, {
"name": "Room",
"category": "Room",
"subCategory": null,
"val": 30
}, {
"name": "Parking",
"category": "Parking",
"subCategory": null,
"val": 20
}]
}, {
"name": "Availability",
"category": "Availability",
"subCategory": [{
"name": "Competent ",
"category": "Competent ",
"subCategory": null,
"val": 30
}]
}]
}, {
"name": "Dislikes",
"category": "Dislikes",
"subCategory": [{
"name": "Management",
"category": "Management",
"subCategory": [{
"name": "Staff",
"category": "Staff",
"subCategory": null,
"val": 50
}, {
"name": "Operations",
"category": "Operations",
"subCategory": null,
"val": 70
}]
}, {
"name": "Nurses",
"category": "Nurses",
"subCategory": [{
"name": "Medicine",
"category": "Medicine",
"subCategory": null,
"val": 30
}]
}]
}, {
"name": "Neutral",
"category": "Neutral",
"subCategory": [{
"name": "Serving",
"category": "Serving",
"subCategory": [{
"name": "Took long time",
"category": "Took long time",
"subCategory": null,
"val": 50
}, {
"name": "Rude",
"category": "Rude",
"subCategory": null,
"val": 40
}, {
"name": "Seated",
"category": "Seated",
"subCategory": null,
"val": 80
}]
}]
}],
"index": 16
}];
function addSum(data) {
data.forEach(function(d, index) {
if (Array.isArray(d.subCategory)) {
return (0 + addSum(d.subCategory));
} else {
document.write('<pre>' + JSON.stringify(d.val, 0, 4) + '</pre>');
return d.val;
}
});
}
var sum = addSum(testData1);
alert(sum);

Your return does not belong to addSum, it belongs to forEach, and that's why addSum returns nothing (undefined).
Array.prototype.forEach doesn't expect returning values, and cannot be used to calculate sum or something else.
You can utilize Array.prototype.reduce to achieve your result:
function sum(arr)
{
return arr.reduce(function(a, b) {
return Array.isArray(b.subCategory) ? a + sum(b.subCategory) : a + b.val;
}, 0);
}
sum(testData1);
Or using ECMAScript 6 arrow functions:
var sum = arr => arr.reduce((a, b) => Array.isArray(b.subCategory)
? a + sum(b.subCategory)
: a + b.val, 0);
Working JSFiddle demo.

From .forEach you can't return value, that's why you get undefined, for this case more suitable .reduce method
function addSum(data) {
return data.reduce(function (p, c) {
return p + (Array.isArray(c.subCategory) ? addSum(c.subCategory) : c.val);
}, 0);
}
Example
or if you want use .forEach you can do it like this
function addSum(data) {
return function sum(data, result) {
data.forEach(function (element) {
result = Array.isArray(element.subCategory)
? sum(element.subCategory, result)
: result + element.val;
});
return result;
}(data, 0);
}
Example

You can't return from your foreach, only from your function. Here's a working version of your function:
function addSum(data,tot) {
tot = tot || 0;
data.forEach(function(d, index) {
if (Array.isArray(d.subCategory)) {
tot = addSum(d.subCategory, tot);
} else {
tot += parseInt(d.val);
document.write('<pre>' + d.val + ' - ' + tot + ' </pre>');
}
});
return tot;
}
and a jsfiddle:
https://jsfiddle.net/mckinleymedia/uk5njxnp/
I agree that this should be simplified to a reduce function, but I thought it would also help to see how to modify what you did to make it work.

Return in the foreach function is for the callback and does not return from the addSum() function. Foreach callback return will not help in this case. Instead using some external variable for keeping the sum will do the trick.
The updated code below defines a variable sum inside the addSum() function and the return value of recursive call is added to it. The function will now return the calculated sum at the end.
var testData1 = [{
"name": "Doctors",
"category": "Doctors",
"subCategory": [{
"name": "Likes",
"category": "Likes",
"subCategory": [{
"name": "Visit",
"category": "Visit",
"subCategory": [{
"name": "Charges",
"category": "Charges",
"subCategory": null,
"val": 30
}]
}]
}, {
"name": "Dislikes",
"category": "Dislikes",
"subCategory": [{
"name": "Quality",
"category": "Quality",
"subCategory": [{
"name": "Appointment",
"category": "Appointment",
"subCategory": null,
"val": 50
}, {
"name": "Care",
"category": "Care",
"subCategory": null,
"val": 70
}, {
"name": "Attentive ",
"category": "Attentive ",
"subCategory": null,
"val": 90
}]
}]
}, {
"name": "Neutral",
"category": "Neutral",
"subCategory": [{
"name": "Professional ",
"category": "Professional ",
"subCategory": [{
"name": "Ease",
"category": "Ease",
"subCategory": null,
"val": 50
}, {
"name": "Competent ",
"category": "Competent ",
"subCategory": null,
"val": 40
}, {
"name": "Availability",
"category": "Availability",
"subCategory": null,
"val": 80
}]
}]
}],
"index": 6
}, {
"name": "Service",
"category": "Service",
"subCategory": [{
"name": "Likes",
"category": "Likes",
"subCategory": [{
"name": "Environment",
"category": "Environment",
"subCategory": [{
"name": "Professionalism ",
"category": "Professionalism ",
"subCategory": null,
"val": 50
}, {
"name": "Room",
"category": "Room",
"subCategory": null,
"val": 30
}, {
"name": "Parking",
"category": "Parking",
"subCategory": null,
"val": 20
}]
}, {
"name": "Availability",
"category": "Availability",
"subCategory": [{
"name": "Competent ",
"category": "Competent ",
"subCategory": null,
"val": 30
}]
}]
}, {
"name": "Dislikes",
"category": "Dislikes",
"subCategory": [{
"name": "Management",
"category": "Management",
"subCategory": [{
"name": "Staff",
"category": "Staff",
"subCategory": null,
"val": 50
}, {
"name": "Operations",
"category": "Operations",
"subCategory": null,
"val": 70
}]
}, {
"name": "Nurses",
"category": "Nurses",
"subCategory": [{
"name": "Medicine",
"category": "Medicine",
"subCategory": null,
"val": 30
}]
}]
}, {
"name": "Neutral",
"category": "Neutral",
"subCategory": [{
"name": "Serving",
"category": "Serving",
"subCategory": [{
"name": "Took long time",
"category": "Took long time",
"subCategory": null,
"val": 50
}, {
"name": "Rude",
"category": "Rude",
"subCategory": null,
"val": 40
}, {
"name": "Seated",
"category": "Seated",
"subCategory": null,
"val": 80
}]
}]
}],
"index": 16
}];
function addSum(data) {
sum = 0;
data.forEach(function(d, index) {
if (Array.isArray(d.subCategory)) {
sum += (0 + addSum(d.subCategory));
} else {
document.write('<pre>' + JSON.stringify(d.val, 0, 4) + '</pre>');
sum += d.val;
}
});
return sum;
}
var sum1 = addSum(testData1);
alert(sum1);

How to remove trlabel value and tlLabel value from the square but it should be there in tooltip in heatmap chart?

I want to add description value from X and Y axies in tooltip of heat map data plots. I achieved that using trLabel and tlLabel properties but as it is used to show that values in top left and top right inside the square box. I don't want that values inside data plot boxes. I want these only in tooltips.
If I'm doing it wrong way, please suggest me the correct way.
Fiddle Showing my approach.
Any help would be appreciated.

I tried solving the your issue, hope this will help you..
FusionCharts.ready(function() {
var salesHMChart = new FusionCharts({
type: 'heatmap',
renderAt: 'chart-container',
width: '550',
height: '270',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Top Smartphone Ratings",
"subcaption": "By Features",
"xAxisName": "Features",
"yAxisName": "Model",
"showplotborder": "1",
"xAxisLabelsOnTop": "1",
"plottooltext": "<div id='nameDiv' style='font-size: 12px; border-bottom: 1px dashed #666666; font-weight:bold; padding-bottom: 3px; margin-bottom: 5px; display: inline-block; color: #888888;' >$rowLabel :</div>{br}Rating : <b>$dataValue</b>{br}$columnLabel : <b>$tlLabel</b>{br}<b>$trLabel</b>",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"usePlotGradientColor": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"legendBgAlpha": "0",
"legendBorderAlpha": "0",
"legendShadow": "0",
"legendItemFontSize": "10",
"legendItemFontColor": "#666666",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
},
"rows": {
"row": [
{
"id": "SGS5",
"label": "Samsung Galaxy S5"
},
{
"id": "HTC1M8",
"label": "HTC One (M8)"
},
{
"id": "IPHONES5",
"label": "Apple iPhone 5S"
},
{
"id": "LUMIA",
"label": "Nokia Lumia 1520"
}
]
},
"columns": {
"column": [
{
"id": "processor",
"label": "Processor"
},
{
"id": "screen",
"label": "Screen Size"
},
{
"id": "price",
"label": "Price"
},
{
"id": "backup",
"label": "Battery Backup"
}
,
{
"id": "cam",
"label": "Camera"
}
]
},
"dataset": [
{
"data": [
{
"rowid": "SGS5",
"columnid": "processor",
"value": "8.7",
"tllabel": "Quad Core 2.5 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "SGS5",
"columnid": "screen",
"value": "8.5",
"tllabel": "5.1 inch",
"trlabel": "AMOLED screen"
},
{
"rowid": "SGS5",
"columnid": "price",
"value": "9.3",
"tllabel": "$600"
},
{
"rowid": "SGS5",
"columnid": "backup",
"value": "9.7",
"tllabel": "29 Hrs",
"trlabel": "Battery : 2800 MAH"
},
{
"rowid": "SGS5",
"columnid": "cam",
"value": "8",
"tllabel": "16 MP",
"trlabel": "Front Camera : 2.1 MP"
},
{
"rowid": "HTC1M8",
"columnid": "processor",
"value": "9.2",
"tllabel": "Quad Core 2.3 GHz",
"trlabel": "OS : Android 4.4 Kitkat"
},
{
"rowid": "HTC1M8",
"columnid": "screen",
"value": "8.3",
"tllabel": "5 inch",
"trlabel": "LCD screen"
},
{
"rowid": "HTC1M8",
"columnid": "price",
"value": "7.3",
"tllabel": "$600"
},
{
"rowid": "HTC1M8",
"columnid": "backup",
"value": "8.8",
"tllabel": "20 Hrs",
"trlabel": "Battery : 2600 MAH"
},
{
"rowid": "HTC1M8",
"columnid": "cam",
"value": "8.7",
"tllabel": "4 MP",
"trlabel": "Front Camera : 5 MP"
},
{
"rowid": "IPHONES5",
"columnid": "processor",
"value": "9.1",
"tllabel": "Dual Core",
"trlabel": "OS : iOS 7"
},
{
"rowid": "IPHONES5",
"columnid": "screen",
"value": "8.6",
"tllabel": "4 inch",
"trlabel": "Retina LCD screen"
},
{
"rowid": "IPHONES5",
"columnid": "price",
"value": "7.2",
"tllabel": "$649"
},
{
"rowid": "IPHONES5",
"columnid": "backup",
"value": "8.4",
"tllabel": "10 Hrs",
"trlabel": "Battery : 1560 MAH"
},
{
"rowid": "IPHONES5",
"columnid": "cam",
"value": "9.5",
"tllabel": "8 MP",
"trlabel": "Front Camera : 1.2 MP"
},
{
"rowid": "LUMIA",
"columnid": "processor",
"value": "8.8",
"tllabel": "Quad Core 2.2 GHz",
"trlabel": "OS: Windows Phone 8"
},
{
"rowid": "LUMIA",
"columnid": "screen",
"value": "9.1",
"tllabel": "6 inch",
"trlabel": "LCD screen"
},
{
"rowid": "LUMIA",
"columnid": "price",
"value": "9.7",
"tllabel": "$470"
},
{
"rowid": "LUMIA",
"columnid": "backup",
"value": "9.2",
"tllabel": "27 Hrs",
"trlabel": "Battery : 3400 MAH"
},
{
"rowid": "LUMIA",
"columnid": "cam",
"value": "8.1",
"tllabel": "20MP",
"trlabel": "Front Camera : 1.2 MP"
}
]
}
],
"colorRange": {
"gradient": "1",
"minValue": "0",
"code": "#e24b1a",
"startLabel": "Poor",
"endLabel": "Good",
"color": [
{
"code": "#e24b1a",
"minValue": "1",
"maxValue": "5",
"label": "Bad"
},
{
"code": "#f6bc33",
"minValue": "5",
"maxValue": "7",
"label": "Average"
},
{
"code": "#6da81e",
"minValue": "7",
"maxValue": "10",
"label": "Good"
}
]
}
}
});
salesHMChart.render();
});

Try using "toolText" attribute.
"toolText": "8.7 {br} Quad Core 2.5 GHz {br} OS : Android 4.4 Kitkat"