如何将字符串对象从套接字转换为 Javascript 中的键值对并显示在 html 上

Question

我使用 webtcp 在 socket 和 websocket 之间建立了一座桥梁，可以从机器上获取数据并将其显示在浏览器上。但此数据是原始数据，需要进行解析。我能够解析它直到数组对象，但没有进一步的成功。无论我做什么，它都只是 returns 作为一个对象。以下是来自套接字的初始原始数据：

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

然后我删除了时间戳并将其转换为数组：

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

我明白了：

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

不幸的是，我无法进一步解析它，我尝试了很多方法，但我得到的只是 Object:object。我希望这些数据是 key:value 对，比如

power:ON
mode: MANUAL
execution: READY

等等，没有任何时间戳。该数据是动态的，并且会随着机器的工作而变化。我尝试了在这里和那里发布的大多数方法，但它总是只是 return 没有数据的对象。请帮助我！

Answer 1

试试这个：

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)

在您的代码中，您应该执行如下操作：

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

如果你想把html放在里面，这里有一个完整的例子：https://jsfiddle.net/p5d7f3Lx/

Answer 2

这是 Array.reduce 的经典场景，将字符串转换为平面数组，并使用 reduce 构建 obj，只需跳过每 2 个项目。

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)

如何将字符串对象从套接字转换为 Javascript 中的键值对并显示在 html 上

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

javascript

sockets

arrays

telnet

websocket