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!

Emeeus · Accepted Answer · 2018-08-13 18:13:20Z

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/

edited Aug 13, 2018 at 18:13

answered Aug 13, 2018 at 17:10

Emeeus

5,2922 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Asyl Over a year ago

unfortunately it did not work, this is what i got back: [object Object] socket_client.html:59 Uncaught ReferenceError: result is not defined at Socket.ondataCustom (socket_client.html:59) at Socket.WebTCPIO.onEvent (webtcp-0.0.1.min.js:1356) at e.WebTCP.sock.onmessage (webtcp-0.0.1.min.js:1339) at e.p.dispatchEvent (webtcp-0.0.1.min.js:172) at e._dispatchMessage (webtcp-0.0.1.min.js:694) at e._didMessage (webtcp-0.0.1.min.js:722) at WebSocket.f.ws.onmessage (webtcp-0.0.1.min.js:780)

Asyl Over a year ago

this is what i get each time. I tried so many methods and all i get will be this: received: [object Object]

Asyl Over a year ago

Asyl Over a year ago

as you see i added JSON.stringify but the result got parsed again to received: [object Object]. It is so weird. I can stringify and i can .split and .slice but i can't make it key value pairs...

Emeeus Over a year ago

@Asyl If you are able to split and slice you are parsing the result, maybe the error is in other place nothing to do with this place, where is line 59?

|

felixmosh · Accepted Answer · 2018-08-13 17:20:15Z

1

This is a classic scenario for Array.reduce, converting the string into a flat array, and with the reduce you building the obj, just skipping every 2 items.

const 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";

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

const obj = arr.reduce((acc, current, i, original) => {
  if (i % 2 === 1) {
    acc[original[i - 1]] = current;
  }
  return acc;
}, {})

console.log(obj)

answered Aug 13, 2018 at 17:20

felixmosh

35.8k10 gold badges81 silver badges99 bronze badges

5 Comments

Asyl Over a year ago

i am just getting this: [object Object]. why it is not parsing string object to anything what i try...

Asyl Over a year ago

thank you. i fixed my error. it was in outputing with string

Asyl Over a year ago

how can i output this to html?

felixmosh Over a year ago

You can just use JSON.stringify on the object, that will return to u a string, that you will be able to put inside html.

felixmosh Over a year ago

document.getElementById('element-id').innerText = JSON.stringify(obj);

Collectives™ on Stack Overflow

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

2 Answers 2

10 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related