How to convert String Object from socket to Key, Value pair in Javascript and display on html

Question

Using webtcp i build a bridge between socket and websocket and can get data from a machine and display it on browser. But this data is raw and needs to be parsed. I was able to parse it up until array object but there was no further success. Whatever i do it just returns as an object. Below is the initial raw data from socket:

received: 2018-08-13T16:43:34.0689|power|ON|mode|MANUAL|execution|READY|Xact|0.00|Yact|0.00|Zact|0.00|Xcom|0.00|Ycom|0.00|Zcom|0.00|path_feedrate|0.00|line|0|Block|0|program|O-Logo.ord

received: 2018-08-13T16:43:34.0689|comms|NORMAL||||
2018-08-13T16:43:34.0689|Sspeed|0.00

then i removed timestamp and turned it to an array by doing:

socket.on('data', function (data) {
    var machineData = data.split("|");
    var arrData = machineData.slice(1);
    console.log("received: " + arrData);
    document.getElementById("data").innerHTML = ("Received: " + arrData);
});

and i get this:

received: power,ON,mode,MANUAL,execution,READY,Xact,0.00,Yact,0.00,Zact,0.00,Xcom,0.00,Ycom,0.00,Zcom,0.00,path_feedrate,0.00,line,0,Block,0,program,O-Logo.ord

received: comms,NORMAL,,,,
2018-08-13T16:47:40.0978,Sspeed,0.00

Unfortunately i can not parse it further, i tried so many methods and all i get was Object:object. I want this data to be key:value pairs, like

power:ON
mode: MANUAL
execution: READY 

and so on and without any timestamps. This data is dynamic and it will change as machine is working. I tried most of the methods posted here and there but always it would just return Object with no data. Please help me!

Answer 1

Try this:

var str = "power|ON|mode|MANUAL|execution|READY|Xact|0.00|Yact|0.00|Zact|0.00|Xcom|0.00|Ycom|0.00|Zcom|0.00|path_feedrate|0.00|line|0|Block|0|program|O-Logo.ord";

var arr = str.split("|");

var obj = {}

arr.map((o, i) => {
  if ((i + 1) % 2 != 0) obj[o] = arr[i + 1];
})

console.log(obj)

In your code you should do something like:

socket.on("data", function(data) {
  var arr = data.split("|").slice(1);

  var obj = {};

  arr.map((o, i) => {
    if ((i + 1) % 2 != 0) obj[o] = arr[i + 1];
  });

  console.log(obj);
})

If you want to put inside html, here a full example: https://jsfiddle.net/p5d7f3Lx/