I want to dynamically add string to push method in array. If you look at the expected below, you would find render: function(data, type, row) {...} in "% Change" column. I want to add string based on column name which is % Change in this case. When I am using Object.keys( ) order of column names is also different than the original array.
var columns= [];
const overallTradeAnnual = [{
"Period": "Export",
"2020": 276.2,
"2019": 324.3,
"% Change": -14.8
}, {
"Period": "Import",
"2020": 371.9,
"2019": 486.1,
"% Change": -23.5
}];
columnNames = Object.keys(overallTradeAnnual[0]);
for (var i in columnNames) {
columns.push({
data: columnNames[i],
title: columnNames[i]
});
}
console.log(columns);
Output I am getting
[{
data: "2019",
title: "2019"
}, {
data: "2020",
title: "2020"
}, {
data: "Period",
title: "Period"
}, {
data: "% Change",
title: "% Change"
}]
Expected Output
[{
data: "Period",
title: "Period"
}, {
data: "2019",
title: "2019"
}, {
data: "2020",
title: "2020"
}, {
data: "% Change",
title: "% Change",
render: function(data, type, row) {
if (!data) {
return '-';
}
if (data < 0) {
return '<span style="color: red;">' + data + '%' + '</span>';
}
if (data > 0) {
return '<span style="color: green;">' + '+' + data + '%' + '</span>';
}
return '<span style="color: #62dd62;">' + data + '%' + '</span>';
}
}]
If I understood correctly you want to add a string dynamically to an object inside an array with a function. You can do it like this:
function myRenderFunction(data, type, row) {
if (!data) {
return '-';
}
if (data < 0) {
return '<span style="color: red;">' + data + '%' + '</span>';
}
if (data > 0) {
return '<span style="color: green;">' + '+' + data + '%' + '</span>';
}
return '<span style="color: #62dd62;">' + data + '%' + '</span>';
}
After that function you can add a call to it in your push method
for (var i in columnNames) {
columns.push({
data: columnNames[i],
title: columnNames[i],
specialString: myRenderFunction(columnNames(i))
});
}
You can just check if(columnNames[i]=='% Change') and push accordingly.
var columns= [];
const overallTradeAnnual = [{
"Period": "Export",
"2020": 276.2,
"2019": 324.3,
"% Change": -14.8
}, {
"Period": "Import",
"2020": 371.9,
"2019": 486.1,
"% Change": -23.5
}];
columnNames = Object.keys(overallTradeAnnual[0]);
for (var i in columnNames) {
if(columnNames[i]=='% Change'){
columns.push({
data: columnNames[i],
title: columnNames[i],
render: function(data, type, row) {
if (!data) {
return '-';
}
if (data < 0) {
return '<span style="color: red;">' + data + '%' + '</span>';
}
if (data > 0) {
return '<span style="color: green;">' + '+' + data + '%' + '</span>';
}
return '<span style="color: #62dd62;">' + data + '%' + '</span>';
}
});
}else{
columns.push({
data: columnNames[i],
title: columnNames[i]
});
}
}
console.log(columns);
console.log(columns[3].render(1));