JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<span id="local->ethernet->port3->rx_flow">q4234</span>
<span id="local->ethernet->port3->rx">q345</span>
<span id="local->ethernet->port1->rx_flow">128</span>
<span id="remote->id">128</span>
<hr/>

Suggested JSON
<pre>
myObject = {
  "local":{
    "ethernet":{
       "port3": {
         "rx_flow":"q4234",
         "rx":"q345"
       } 
       "port1": {
         "rx_flow":"128"
       } 
    }
  },
  "remote":{
    "id":"128"
  } 
}
</pre>

Actual output:
<div id="log"></div>

JavaScript

function log(str) {
  document.getElementById("log").innerHTML+=str;
}
var spans = document.getElementsByTagName("span");
var myObject = {};
for (var i=0;i < spans.length;i++) {
  var id = spans[i].id;
  var parts = id.split('->');
  var val = spans[i].innerHTML
  if (parts[0]) { // Local or remote
    if (myObject[parts[0]] == null) myObject[parts[0]]={};  
    if (parts[1]) { // ethernet or id
      if (myObject[parts[0]][parts[1]] == null) myObject[parts[0]][parts[1]]=(parts.length==1)?val:{};
      if (parts[2]) { // port3 or port1 
        if (myObject[parts[0]][parts[1]][parts[2]] == null) myObject[parts[0]][parts[1]][parts[2]]=(parts.length==2)?val:{};
        if (parts[3]) { // rx_flow or rx
          myObject[parts[0]][parts[1]][parts[2]][parts[3]]=val;
        }
      }
    }
  }    
}
var t = myObject.remote.id;
for (var o in t) log(o+':'+t[o]+'<br>');
for (var o in myObject) { // local or remote
  log(o+'/');
  for (var p in myObject[o]) { // ethernet or id
    log(p+'/');
    for (var q in myObject[o][p]) { // ports
      log(q+'/');
      for (var r in myObject[o][p][q]) { // rx_flow or rx
        log(r+' - '+myObject[o][p][q][r]+'<br/>');
      }
    }
  }
}