Develop Reference

Loop through JSON in dataLayer

I would like to get the summed value of all the arrays in the "products" object (price * quantity). The summed value should be returned in the return.
Do you have any ideas how to do that?
{
"event": "checkout",
"ecommerce": {
"checkout": {
"actionField": {
"step": 2,
"option": "Initiate checkout",
"action": "checkout"
},
"products": [
{
"id": "52",
"name": "Turystyczna kuchenka gazowa SMILE-KN-03/1K",
"price": 161.788618,
"brand": "",
"category": "kuchenki-elektryczne-i-gazowe",
"variant": "",
"quantity": "1"
},
{
"id": "36",
"name": "Kuchnia gazowa MPM-51-KGF-21",
"price": 641.463415,
"brand": "",
"category": "kuchnie-gazowe",
"variant": "",
"quantity": "1"
}
]
}
},
"gtm.uniqueEventId": 12
}

const g = {
event: 'checkout',
ecommerce: {
checkout: {
actionField: {
step: 2,
option: 'Initiate checkout',
action: 'checkout',
},
products: [
{
id: '52',
name: 'Turystyczna kuchenka gazowa SMILE-KN-03/1K',
price: 161.788618,
brand: '',
category: 'kuchenki-elektryczne-i-gazowe',
variant: '',
quantity: '1',
},
{
id: '36',
name: 'Kuchnia gazowa MPM-51-KGF-21',
price: 641.463415,
brand: '',
category: 'kuchnie-gazowe',
variant: '',
quantity: '1',
},
],
},
},
'gtm.uniqueEventId': 12,
};
const c = g.ecommerce.checkout.products.reduce((acc, curr) => {
acc += curr.price * curr.quantity;
return acc;
}, 0);
console.log(c)
guess you want something like this?

How to display extJS grid columns after each record, not only on the top

How to display extJS columns after each record not on the top.
I am grouping extJS grid with three columns and grouping is working fine.
Here is the code and we can test in fiddler as well.
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
storeId:'employeeStore',
fields:['name', 'seniority', 'department', 'sort', 'groupsort'],
grouper: {
groupFn: function(item) {
return 'department: ' + item.get('department');
}
},
// Have members of each group sorted on this field
sorters: [{
property: 'name'
}],
data: {'employees':[
{ "name": "Michael Scotts", "seniority": 7, "department": "Management", "groupsort" : "2" },
{ "name": "Dwight Schrute", "seniority": 2, "department": "Sales", "groupsort" : "1" },
{ "name": "Jim Halpert", "seniority": 3, "department": "Sales", "groupsort" : "1" },
{ "name": "Kevin Malone", "seniority": 4, "department": "Accounting", "groupsort" : "3" },
{ "name": "Angela Martin", "seniority": 5, "department": "Accounting", "groupsort" : "3" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'employees'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Seniority', dataIndex: 'seniority' },
{ text: 'Department', dataIndex: 'department', sortable: true }
],
features: [{
ftype: 'grouping'
}],
renderTo: Ext.getBody()
});
}
});
My requierment is I want show columns not on the top but after the grouping for each record. Is there any workaround for that.

How to add comma to data labels value in bar chart race of highcarts?

I have a bar chart race displaying and I now trying to render the data for the labels correctkly by adding a comma into them. Can someone tell me how can I add comma to the data labels that are over 1,000?
https://jsfiddle.net/samwhite/Lzh2rwab/
Highcharts.getJSON('https://api.npoint.io/d70fd8f47a70326609bb', function (data) {
initialData =[
{
"": "",
"2017": 954,
"2018": 983,
"2019": 1107,
"2020": 1710,
"2021": "",
"Country Code": "CDF",
"Country Name": "Corporate Disclosures and Financials"
},
{
"": "",
"2017": 758,
"2018": 1054,
"2019": 692,
"2020": 1078,
"2021": "",
"Country Code": "OF",
"Country Name": "Offering Fraud"
},
{
"": "",
"2017": 67,
"2018": 57,
"2019": 35,
"2020": 37,
"2021": "",
"Country Code": "MSAPP",
"Country Name": "Municipal Securities and Public Pension"
}
];
xAxis: {
type: 'category',
},
yAxis: [{
tickAmount: 5,
title: {text:"Number of Tips"}
}],
series: [{
colorByPoint: true,
colors:['#7cb5ec', '#3e9af3', '#1e9af3', '#006af3', '#0060f3', '#0020f3', '#0020c1', '#0020a3', '#001060'],
dataSorting: {
enabled: true,
matchByName: true
},
type: 'bar',
dataLabels: [{
enabled: true,
}],
name: startYear,
data: getData(startYear)[1]
}]
});
});

You can achieve it by using the format feature.
API: https://api.highcharts.com/highcharts/series.line.dataLabels.format
Demo: https://jsfiddle.net/BlackLabel/5sk3ptj7/

Extjs : Show data on Grid

Although I am getting output in the response
Response
{
"result": [{
"date": "",
"emailID": "",
"name": ""
}, {
"date": "2007-04-04T00:00:00",
"emailID": "fgffg",
"name": "cvbgfv"
}, {
"date": "2009-07-15T00:00:00",
"emailID": "hfgh",
"name": "gjhgh"
}, {
"date": "2009-10-07T00:00:00",
"emailID": "gdfd",
"name": "dfgdf"
}, {
"date": "2010-02-10T00:00:00",
"emailID": "vcvc",
"name": "bvcb"
}, {
"date": "2011-04-08T00:00:00",
"emailID": "dfgfdgd",
"name": "fvdf"
}, {
"date": "2012-07-18T00:00:00",
"emailID": "dgffdgfd",
"name": "rgffdg"
}, {
"date": "2012-08-07T00:00:00",
"emailID": "dsfsdfsd",
"name": "sdfdsfdsf"
}, { ... // skipped some lines
"date": "2019-04-08T00:00:00",
"emailID": "vcvbc",
"name": "dg"
}, {
"date": "2019-11-05T00:00:00",
"emailID": "dgfd",
"name": "dfgfdg"
}, {
"date": "2019-11-21T00:00:00",
"emailID": "dgfd",
"name": "dfgfdg"
}, {
"date": "2020-01-01T00:00:00",
"emailID": "fgf",
"name": "vfdvf"
}, {
"date": "2020-01-14T00:00:00",
"emailID": "nbvb",
"name": "fgf"
}, {
"date": "2020-04-14T00:00:00",
"emailID": "fdgdf",
"name": "dgdf"
}, {
"date": "2020-06-09T00:00:00",
"emailID": "sfdds",
"name": "dsfsd"
}, {
"date": "2020-09-23T00:00:00",
"emailID": "fdfgf",
"name": "vcxv"
}],
"success": true,
"totalcount": 84
}
Here is my store & grid
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [{
name: 'date',
type: 'string'
}, {
name: 'emailID',
type: 'string'
}, {
name: 'name',
type: 'string'
}],
pageSize: 10, // items per page
id: 'date',
proxy: {
method: 'GET',
url: 'rest/helloworld/submit',
noCache: false,
type: 'ajax',
root: 'result',
totalProperty: 'totalcount'
}
});
// specify segment of data you want to load using params
store.load({
params: {
start: 0,
limit: 10
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Result',
store: store,
columns: [{
header: 'Name',
dataIndex: 'name'
}, {
header: 'Email',
dataIndex: 'emailID',
flex: 1
}, {
header: 'Date',
dataIndex: 'date'
}],
width: 400,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
But it is not visible on the grid.
Please help

You need to define a reader:
reader: {
type: 'json',
rootProperty: 'result',
totalProperty: 'totalcount'
}
Your example working: https://fiddle.sencha.com/#fiddle/l3u

Access jqgrid elements using a javascript

I am using treegrid of jqgrid, in which i want multiselect which is not possible , so i explicitely put a checkbox column. Now I want to know how to iterate each row of tree grid and access particular cell of that row, so that I can do specific action on it. Thank in advance.

The simplest way to implement your requirements seems me to include additional column in the tree grid which has the checkbox:
You have not posted the code of the grid which you are using. It is even not clear if you are using local tree grid or a remote one. In the following example I am showing how to implement the checkbox from the "Enabled" column in case of local grid. So you can have the following results:
The corresponding demo you will find here.
The HTML code is:
<fieldset style="float:left">
<input id="getSelected" type="button" value="Get Selected"/>
</fieldset>
<fieldset style="clear:both; float:left">
<legend>Seleceted Ids</legend>
<p id="ids"></p>
</fieldset>
<fieldset style="clear:both; float:left">
<legend>Selected Names</legend>
<p id="names"></p>
</fieldset>
<div style="clear:left">
<table id="treegrid"><tr><td/></tr></table>
</div>
and the JavaScript code:
$(function () {
'use strict';
var mydata = [
{ id: "1", name: "Cash", num: "100", debit: "400.00", credit: "250.00", balance: "150.00", enbl: "1",
level: "0", parent: "null", isLeaf: false, expanded: false },
{ id: "2", name: "Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "0",
level: "1", parent: "1", isLeaf: false, expanded: false, loaded: true },
{ id: "3", name: "Sub Cash 1", num: "1", debit: "300.00", credit: "200.00", balance: "100.00", enbl: "1",
level: "2", parent: "2", isLeaf: true, expanded: false },
{ id: "4", name: "Cash 2", num: "2", debit: "100.00", credit: "50.00", balance: "50.00", enbl: "0",
level: "1", parent: "1", isLeaf: true, expanded: false },
{ id: "5", name: "Bank\'s", num: "200", debit: "1500.00", redit: "1000.00", balance: "500.00", enbl: "1",
level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true },
{ id: "6", name: "Bank 1", num: "1", debit: "500.00", credit: "0.00", balance: "500.00", enbl: "0",
level: "1", parent: "5", isLeaf: true, expanded: false },
{ id: "7", name: "Bank 2", num: "2", debit: "1000.00", credit: "1000.00", balance: "0.00", enbl: "1",
level: "1", parent: "5", isLeaf: true, expanded: false },
{ id: "8", name: "Fixed asset", num: "300", debit: "0.00", credit: "1000.00", balance: "-1000.00", enbl: "0",
level: "0", parent: "null", isLeaf: true, expanded: false }],
grid = $("#treegrid"),
getColumnIndexByName = function (columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i, l = cm.length;
for (i = 0; i < l; i++) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
},
iCol;
grid.jqGrid({
datatype: "local",
colNames: ["id", "Account", "Acc Num", "Debit", "Credit", "Balance", "Enabled"],
colModel: [
{name: 'id', index: 'id', width: 1, hidden: true, key: true},
{name: 'name', index: 'name', width: 180},
{name: 'num', index: 'acc_num', width: 80, align: "center"},
{name: 'debit', index: 'debit', width: 80, align: "right"},
{name: 'credit', index: 'credit', width: 80, align: "right"},
{name: 'balance', index: 'balance', width: 80, align: "right"},
{name: 'enbl', index: 'enbl', width: 60, align: 'center',
formatter: 'checkbox', editoptions: {value: '1:0'},
formatoptions: {disabled: false}}
],
height: '100%',
rowNum: 10000,
sortname: 'id',
treeGrid: true,
loadonce: true,
treeGridModel: 'adjacency',
treedatatype: 'local',
ExpandColumn: 'name',
caption: 'Demonstrate how to use Tree Grid for the Adjacency Set Model'
});
// we have to use addJSONData to load the data
grid[0].addJSONData({
total: 1,
page: 1,
records: mydata.length,
rows: mydata
});
iCol = getColumnIndexByName('enbl');
// nth-child need 1-based index so we use (iCol+1) below
$("tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")>input", grid[0]).change(function (e) {
var isChecked = $(this).attr("checked"), rowid, dataIndex,
tr = $(e.target, grid[0].rows).closest("tr.jqgrow");
if (tr.length > 0) {
rowid = tr[0].id;
dataIndex = grid[0].p._index[rowid];
if (typeof dataIndex !== "undefined" && dataIndex >= 0) {
grid[0].p.data[dataIndex].enbl = isChecked ? "1" : "0";
}
}
e.preventDefault();
});
$("#getSelected").click(function () {
var ids = [], names = [], i, data = grid[0].p.data, l = data.length, dataItem;
for (i = 0; i < l; i++) {
dataItem = data[i];
if (dataItem.enbl === "1") {
ids.push(dataItem.id);
names.push(dataItem.name);
}
}
$("#ids").html(ids.join(", "));
$("#names").html(names.join(", "));
});
});

I think there not so difficult.
$("#YourTreegridContainerTag").find(":input[type=='checkbox']").each(function()
{
$(this).attr("cheked", "checked");
});
and for disablling:
$("#YourTreegridContainerTag").find(":input[type=='checkbox']").each(function()
{
$(this).removeAttr("cheked");
});