Core JavaScript

Print an Object Recursively

This JavaScript program demonstrates how to print objects recursively.

PrintAnObjectRecursively.html

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" />
		<title>XoaX.net's Javascript</title>
		<!-- Supply a transparent 1x1 favicon -->
		<link rel="icon" href="data:,">
		<script type="text/javascript" src="PrintAnObjectRecursively.js"></script>
	</head>
	<body onload="Initialize()">
		<span id="idOutput"></span>
	</body>
</html>

PrintAnObjectRecursively.js

function PrintAnObject(sName, qObject, sPre = "") {
  let sOutput = typeof(qObject) +" "+qObject.constructor.name +": " + sName + '<br />';
  for (let sProperty in qObject) {
  	if (typeof(qObject[sProperty]) == "object") {
	    sOutput += PrintAnObject(sProperty, qObject[sProperty], sPre + "&nbsp;&nbsp;&nbsp;&nbsp;");
	  } else {
	  	sOutput += sPre + "&nbsp;&nbsp;&nbsp;&nbsp;" + typeof(qObject[sProperty]) + ': ' + sProperty + ' = ' + qObject[sProperty] + '<br />';
	  }
  }
  return sPre + sOutput;
}


class CAGraphic {
	constructor() {}
	Draw(qContext, qT = CTransformation.GetIdentity()) {}
}

class CDisk extends CAGraphic {
	constructor(dR, sColor) {
		super();
		this.mdR = dR;
		this.msColor = sColor;
	}
}

class CRectangle extends CAGraphic {
	constructor(dW, dH, sColor) {
		super();
		this.mdW = dW;
		this.mdH = dH;
		this.msColor = sColor;
	}
}

class CComposite extends CAGraphic {
	// Transformation array
	mdaT = new Array();
	mdaG = new Array();
	constructor() {
		super();
	}
	Add(qTransformation, qGraphic) {
		this.mdaT.push(qTransformation);
		this.mdaG.push(qGraphic);
	}
}

class CTransformation {
	// [ A[0], A[2], A[4] ]
	// [ A[1], A[3], A[5] ]
	// [    0,    0,    1 ]
	constructor(dA0, dA1, dA2, dA3, dA4, dA5) {
		this.mdaA = new Array(dA0, dA1, dA2, dA3, dA4, dA5);
	}
	static GetTranslation(dDx, dDy){
		return new CTransformation(1.0, 0.0, 0.0, 1.0, dDx, dDy);
	}
}

function Initialize() {

	var qBackground = new CComposite();
	var qSky = new CRectangle(640, 300, "darkblue");
	var qGround = new CRectangle(640, 180, "green");
	var qMoon = new CDisk(40, "white");
	qBackground.Add(CTransformation.GetTranslation(0, 0), qSky);
	qBackground.Add(CTransformation.GetTranslation(0, 300), qGround);
	qBackground.Add(CTransformation.GetTranslation(500, -200), qMoon);
	
	let qElement = document.getElementById("idOutput");
	qElement.innerHTML = PrintAnObject("qBackground", qBackground);
}
 

Output

 
 

© 2007–2026 XoaX.net LLC. All rights reserved.