JSFiddle - React, Tailwind, and code Playground

HTML

<textarea>
{
   "AgreementOffer":{
      "Name":{
         "__prefix":"wsag",
         "__text":"1cap"
      },
      "Context":{
         "AgreementInitiator":{
            "__prefix":"wsag",
            "__text":"$SPECS-CUSTOMER"
         },
         "AgreementResponder":{
            "__prefix":"wsag",
            "__text":"$SPECS-APPLICATION"
         },
         "ServiceProvider":{
            "__prefix":"wsag",
            "__text":"AgreementResponder"
         },
         "ExpirationTime":{
            "__prefix":"wsag",
            "__text":"2014-02-02T06:00:00"
         },
         "TemplateName":{
            "__prefix":"wsag",
            "__text":"Y2-APP-TEMPLATE"
         },
         "__prefix":"wsag"
      },
      "Terms":{
         "All":{
            "ServiceDescriptionTerm":{
               "serviceDescription":{
                  "service_resources":{
                     "resources_provider":{
                        "VM":{
                           "_appliance":"us-east-1/ami-ff0e0696",
                           "_hardware":"t1.micro",
                           "_descr":"open suse 13.1 on amazon EC2",
                           "__prefix":"specs"
                        },
                        "_id":"aws-ec2",
                        "_name":"Amazon",
                        "_zone":"us-east-1",
                        "__prefix":"specs"
                     },
                     "__prefix":"specs"
                  },
                  "capabilities":{
                     "capability":{
                        "security_control":[
                           {
                              "control_description":{
                                 "__prefix":"specs",
                                 "__text":"The organization:\n \t\t\ta. Develops, documents, and disseminates to [Assignment: organization-defined personnel or roles]:\n \t\t\t\t1. A system and information integrity policy that addresses purpose, scope, roles,...

JavaScript

function AppendObject(obj) {
	console.log(JSON.stringify(obj) + ":" + JSON.stringify(obj).length);
  
	var Summary = null;
  for (var propertyName in obj) {
  	if (typeof obj[propertyName] === "object" && !Summary) {
    	Summary = { name: propertyName.toString(), size: JSON.stringify(obj).length, children: [] };
      
      for (var childPropertyName in obj[propertyName]) {
      	var Child = {};
        Child[childPropertyName] = obj[propertyName][childPropertyName];
      	Summary.children[Summary.children.length] = AppendObject(Child);
      }
        
      break;
    } else if (!Summary) Summary = { key: propertyName, value: obj[propertyName], size: JSON.stringify(obj).length };
    
    continue;
  	if (typeof obj[propertyName] !== "object" && !(obj[propertyName] instanceof Array))
    {
    	Summary.children[Summary.children.length] = { value: obj[propertyName], length: JSON.stringify(obj) };
    }
    else if (typeof obj[propertyName] === "object" && obj.children) {
    	Summary.children[Summary.children.length] = AppendObject(obj[propertyName]);
    }
    else {
    }
  }
  
  return Summary;
}

function Convert() {
	$(".data").empty();
  var ParsedJSON = $.parseJSON($("textarea").val()),
  		ObjectArray = [],
  		Summaries = [];
  
  if (!(ParsedJSON instanceof Array)) ObjectArray[0] = ParsedJSON;
  else ObjectArray = ParsedJSON;
  
  for (var i = 0; i < ObjectArray.length; i++) Summaries[Summaries.length] = AppendObject(ObjectArray[i]);
  
  $(".data").text(JSON.stringify(Summaries));
}

$("button").on("click", function(){Convert();});