parsing unkwon response to table ajax jquery

Question

I am using an API to get response, In ajax success, I get this kind of response

{
  "Capabilities": {
    "System": {
      "SystemLogging": "true",
      "SystemBackup": "true",
      "StorageConfiguration": "false",
      "RemoteDiscovery": "true",
      "HttpSystemLogging": "false",
      "HttpSystemBackup": "true",
      "HttpSupportInformation": "false",
      "HttpFirmwareUpgrade": "true",
      "FirmwareUpgrade": "true",
      "DiscoveryResolve": "false",
      "DiscoveryBye": "true"
    },
    "Security": {
      "X.509Token": "false",
      "UsernameToken": "true",
      "TLS1.2": "false",
      "TLS1.1": "false",
      "TLS1.0": "false",
      "SupportedEAPMethods": "0",
      "SAMLToken": "false",
      "RemoteUserHandling": "false",
      "RELToken": "false",
      "OnboardKeyGeneration": "false",
      "MaxUsers": "32",
      "MaxUserNameLength": "32",
      "MaxPasswordLength": "16",
      "KerberosToken": "false",
      "HttpDigest": "true",
      "Dot1X": "false",
      "DefaultAccessPolicy": "true",
      "AccessPolicyConfig": "false"
    },
    "Network": {
      "ZeroConfiguration": "true",
      "NTP": "1",
      "IPVersion6": "true",
      "IPFilter": "true",
      "HostnameFromDHCP": "true",
      "DynDNS": "true",
      "Dot1XConfigurations": "0",
      "Dot11Configuration": "false",
      "DHCPv6": "true"
    }
  }
}

I want to parse this to table, But instead of that just to try out, I am appending it to xmp tag. But its coming as an [object Object]. Even if I do parseJSON, I get error for that.

  "<xmp>
    #{data}
  </xm>

Is it possible to make something more dynamic that , It may handle that response?

UPDATE: I tried using https://github.com/abodelot/jquery.json-viewer it worked good but I want to parse it table is it possible?

score 0 · Accepted Answer · edited May 23 '17 at 12:25

Use JSON.stringify() to transform response data in a string, which you can display, then you can put the result in your xmp tag.

$("xmp").text(JSON.stringify(data));

Of course if you need to display your JSON hierarchically you've to do some work on iterating on the data properties, keep track of properties level and so on.

EDIT

I prepared an couple of dirty examples for showing how iterating over your json properties. The first one makes a row for each sub-object in json data. The second prints a columns for each 'leaf' property in the json data. The basic is the

  for(key in obj)

iterator which allows iterating over an object's property. ALso there's the use of the jquery's $.type function which allows checking if a variable is an object for simple objects. The matter on how to detect if a var is an object in pure JS may be complex, if you want you can have a look at Check if a value is an object in JavaScript

var data={
  "Capabilities": {
    "System": {
      "SystemLogging": "true",
      "SystemBackup": "true",
      "StorageConfiguration": "false",
      "RemoteDiscovery": "true",
      "HttpSystemLogging": "false",
      "HttpSystemBackup": "true",
      "HttpSupportInformation": "false",
      "HttpFirmwareUpgrade": "true",
      "FirmwareUpgrade": "true",
      "DiscoveryResolve": "false",
      "DiscoveryBye": "true"
    },
    "Security": {
      "X.509Token": "false",
      "UsernameToken": "true",
      "TLS1.2": "false",
      "TLS1.1": "false",
      "TLS1.0": "false",
      "SupportedEAPMethods": "0",
      "SAMLToken": "false",
      "RemoteUserHandling": "false",
      "RELToken": "false",
      "OnboardKeyGeneration": "false",
      "MaxUsers": "32",
      "MaxUserNameLength": "32",
      "MaxPasswordLength": "16",
      "KerberosToken": "false",
      "HttpDigest": "true",
      "Dot1X": "false",
      "DefaultAccessPolicy": "true",
      "AccessPolicyConfig": "false"
    },
    "Network": {
      "ZeroConfiguration": "true",
      "NTP": "1",
      "IPVersion6": "true",
      "IPFilter": "true",
      "HostnameFromDHCP": "true",
      "DynDNS": "true",
      "Dot1XConfigurations": "0",
      "Dot11Configuration": "false",
      "DHCPv6": "true"
    }
  }
};

function inspect(obj, level){
  retVal="";
  for(key in obj){
    if ($.type(obj[key])==="object"){
        
        retVal=retVal+"<tr><td><strong>"+key+"</strong></td></tr>"+inspect(obj[key])+"<BR>";
    }
    else {
       retVal=retVal+"<td><strong>"+ key+"</strong>:"+obj[key]+"</td>";            
    }
  }
  return retVal;
     
}
                                  
function toTable(obj, aTable){
  if(aTable==="undefined"|| aTable===null){
    aTable={};
    aTable.header=[];
    aTable.data=[]
  }
  
  for(key in obj){
    if ($.type(obj[key])==="object"){
      aTable=toTable(obj[key],aTable);    
    }
    else {
       aTable.header.push(key);
       aTable.data.push(obj[key]);
    }
  }
  return aTable;
     
}


var ret="<table id='tabular'>"+inspect(data)+"</table>";
$("#datas").html(ret);

var asTable=toTable(data,null);
var myTable="<table id='tabular2'><tr>";
for(var i=0;i<asTable.header.length;i++){
  myTable=myTable+"<td><strong>"+asTable.header[i]+"</strong></td>";
}
myTable=myTable+"</tr><tr>";
for(var i=0;i<asTable.data.length;i++){
  myTable=myTable+"<td>"+asTable.data[i]+"</td>";
}
myTable=myTable+"</tr></table>";
$("#datas2").html(myTable);

#tabular td {border:1px solid gray};
#tabular {border:1px solid gray; border-collapse:collapse}

#tabular2 td {border:1px solid blue};
#tabular2 {border:1px solid blue; border-collapse:collapse}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <h3> EXAMPLE 1</h3>
  <div id="datas">
  </div>
  <!--<br><br>&nbsp;<br>-->
  <h3> EXAMPLE 2</h3>    
  <div id="datas2">
  </div>

what about parsing that data to a table? with uknown key and values? — Junaid Farooq, Feb 15 '17 at 07:58
Loop on obj properties, check if they are.objs and so on. How the table should be made? — Massimo Petrus, Feb 15 '17 at 08:06
table should be simple using only parent keys as header how the values.. — Junaid Farooq, Feb 15 '17 at 08:25
have a look to my answer, it could be a good starting point. Then you probably have to work on it a little bit — Massimo Petrus, Feb 15 '17 at 09:35

parsing unkwon response to table ajax jquery

1 Answers1