Add string to push method

Question

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>';
  }
}]

score 1 · Answer 1 · answered Feb 21 '22 at 15:38

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))
  });
}

score 0 · Answer 2 · answered Feb 21 '22 at 15:42

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));

Thanks. Can we also maintain column orders as it's shown in the array? For example starts with Period etc — Ujjawal Bhandari, Feb 21 '22 at 15:51
Its not that easy as objects are a collection of unsorted properties. If you want to keep the order, you could e.g. store the properties in an array or a Map Object instead of an object https://stackoverflow.com/a/5525820/9175097 — MWO, Feb 21 '22 at 17:23

Add string to push method

2 Answers2