Tabulator processing ajax data before load

Question

I need help if it is possible to modify table data before load into table in Tabulator library. I need to convert decimal value of (8 poles)DIP switch to separate 8 bits and load it to table. I have data in json format like this:

[
{"id":1, "name":"DIP1", "value":15},
{"id":2, "name":"DIP2", "value":75}
]

and I would like format data to this (for decimal value 15):

[{"id":1, "name":"DIP1", "sw1":0,"sw2":0,"sw3":0,"sw4":0,"sw5":1,"sw6":1,"sw7":1,"sw8":1,}]

to this table:

columns:[
        { title:'ID', field:'id', width:50 },
        { title:'DIP NAME', field:'name', headerFilter:'input', editor:'input', hozAlign:'center' },
        { title:' DIP SWITCHES', hozAlign:'center',
            columns:[               
                { title:'SW1', field:'sw1',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW2', field:'sw2',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW3', field:'sw3',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW4', field:'sw4',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW5', field:'sw5',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW6', field:'sw6',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW7', field:'sw7',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
                { title:'SW8', field:'sw8',  width:30, hozAlign:'center', editor:true, formatter:'tickCross', headerVertical:true, headerFilter:'tickCross',  headerFilterParams:{"tristate":true}, headerSort:false },
            ],
        }
],

I know how to extract each bit in c:

 var sw1 = bitRead( value, 7 );
 var sw2 = bitRead( value, 6 );
 var sw3 = bitRead( value, 5 );
 var sw4 = bitRead( value, 4 );
 var sw5 = bitRead( value, 3 );
 var sw6 = bitRead( value, 2 );
 var sw7 = bitRead( value, 1 );
 var sw8 = bitRead( value, 0 );

but I dont know how to do this when data are loaded into table using ajax.

Can somebody help how to do it please?

I am newbie and I cant help myself.

Thank you!

Answer 1

You can spread the switches to a separate bit values like that:

// You may need to parse (JSON.parse()) if serialized
let data = [{
    "id": 1,
    "name": "DIP1",
    "value": 15
  },
  {
    "id": 2,
    "name": "DIP2",
    "value": 75
  }
]

let transformed = data.map(({
  value,
  ...data
}, i) => {
  // toString(2) transforms a number to a binary string
  // PadStarts adds the zeros on left if neccessary
  // split converts the string to array of 8 bits
  let toBits = value.toString(2).padStart(8, "0").split("")
  // this will create an object of eight bits with according values
    .reduce((accum, bit, i) => {
      accum["sw" + (i + 1)] = Number(bit)
      return accum
    }, {})
  
  // spread operator will flatten the object
  return {
    id: i + 1,
    ...data,
    ...toBits,
  }
})

console.log(transformed)

Then, you should be able to use the content transformed as the table data like that (see http://tabulator.info/docs/4.9/data):

var table = new Tabulator("#example-table", {
  // ...other options
          ajaxResponse: function (url, params, response) {
          //url - the URL of the request
          //params - the parameters passed with the request
          //response - the JSON object returned in the body of the response.
          
          // `response` might be rather be `response.data` or such...
          let transformed = response.map(({ value, ...data }) => {
            let toBits = value
              .toString(2)
              .padStart(8, "0")
              .split("")
              .reduce((accum, bit, i) => {
                accum["sw" + (i + 1)] = Number(bit);
                return accum;
              }, {});

            return {
              ...data,
              ...toBits,
            };
          });
          return transformed;
        },
      });

      table.setData(<YOUR API URL>); // Change to your API endpoint