Prototype ¬ Detail

author: JasonM [+], Submitted: 07.04.03 4a • Last Edit: 02.02.05 3p
Avg. Rating: 5

/* XML.makeObj

   Create a dot syntax object from an XML Object/File

   full XMLtree node recursion,

   Duplicate nodes collected as Array's
   > in which case node._type property set to == "array"
   > _type undefined in other cases

   ===================================
   Copyleft (-c-) J.Milkins - 2003-2004
   http://www.mentalaxis.com

*/
XML.prototype.makeObj = function(xObj, obj) {
	//----- Initialise objects
	if (xObj == null) {
		xObj = this;
	}
	if (obj == null) {
		obj = {};
	}
	var a, c, nName, nType, nValue, cCount;
	//----- Add attributes to the object
	for (a in xObj.attributes) {
		obj[a] = xObj.attributes[a]
	}
	//----- Build child nodes
	for (c in xObj.childNodes) {
		nName = xObj.childNodes[c].nodeName;
		nType = xObj.childNodes[c].nodeType;
		nValue = xObj.childNodes[c].nodeValue;
		if (nType == 3) {
			obj._value = nValue;
			obj._type = 'text';
		}
		if (nType == 1 && nName != null) {
			if (obj[nName] == null) {
				obj[nName] = this.makeObj(xObj.childNodes[c], {});
			} else if (obj[nName]._type != 'array') {
				obj[nName] = [obj[nName]];
				obj[nName]._type = 'array';
			}
			if (obj[nName]._type == 'array') {
				obj[nName].unshift(this.makeObj(xObj.childNodes[c], {}));
			}
		}
	}
	// Return object
	return obj;
};

usage

   [big][b]XML.makeObj()[/b][/big]
   Builds a dot syntax Object from an XML Object so each element and attribute
   can be accessed by name...

   The script adds a new method to the XML Object called makeObj()
   
   [big][b]Usage[/b][/big]
   1.  Create an XML object and load in the XML data.

   2.  In your XML.onload function (or after all the XML data is loaded)
       add the following code:
		
       [i]dotXMLObject = regularXMLobject.makeObj();[/i]

       [b][big]Notes:[/big][/b]

        [b]Quick hint[/b]
        To get a quick look at your converted object in Flash authoring, 
        Open the output window (F2) and then dump variables to output
        (Ctrl+Alt+V (PC)) 

        [b]Node array's[/b]
        There is a facility to check if a node is an
        array or not. This is useful, for example, if you 
        have a shopping cart application which, of course, 
        could have only one item in it...
        
        For this purpose there is a _type property for each node...
        This is either undefined or set to "array"
        
        e.g. 
        if(myObject.myNode._type != "array") {
        // execute single item code..
        }
        else
        {
        // execute array loop code
        }

msg1 { JasonM [+], posted: 07.26.03 5a•09.30.04 6a, top [^] }

Any suggestions on improved functionality of this method would be greatly appreciated.

BTW, I'd suggest you check out OpenAMF, AMFPHP etc as this provides direct Object access.

msg2 { indivision [+], posted: 09.29.03 12p•09.29.03 12p, top [^] }

Does anyone have a solution for this prototype so that HTML tags can be used in the XML?

msg3 { JasonM [+], posted: 11.01.03 6p•09.30.04 6a, top [^] }

As fas as importing HTML it's easy, just use CDATA inside your data tags

<mydatatag><![CDATA[ <p>HTML here</p> ]]></mydatatag>

msg4 { seancharles [+], posted: 11.27.03 8a•-, top [^] }

Hello,

I downloaded an earlier version that worked but today I downloaded it again to show somebody else and it didn't work! It took me a few minutes in the debugger to spot the difference... as published the code *can't* work because there are two calls to buildObject() which should be calls to makeObj() to make it work recursively.

If this has been mentioned elsewhere than I apologise in advance.

Thanks for a very usefule site.

Sean Charles

msg5 { JasonM [+], posted: 11.27.03 8a•-, top [^] }

Thanks for the comment... I was just tweaking it and forgot to change the names back...

msg6 { philip_saa [+], posted: 04.05.04 11a•-, top [^] }

Here is what I've been using to work around the (_type = array).

var oXML = myObject.myNode;
var myList = (oXML._type != "array") ? [oXML] : oXML;

// execute array loop code

msg7 { JasonM [+], posted: 09.30.04 6a•11.08.04 10a, top [^] }

The type = "_array" is there for this purpose, otherwise there's no need to use it.

Simple usage:
if(myConvertedObject.myDesiredNode._type == "array") {
  // process as array
} else {
  // process as single item
}

(of course the example from Philip_Saa works great, this example is really just a bit easier to read for the noobs out there, whichever you understand best use that. I'd recommend philip_saa's)

msg8 { gAntico {alt123} [+], posted: 10.04.04 12p•10.04.04 1p, top [^] }

I would really appreciate if I was able to cicle the objects created by your prototype, without dealing with the "detect if it's an array" workarounds. I mean, it's ok to detect it if you have few levels of nidification, but when you have many of them it starts to be more time consuming.

Definitely I would really prefer to have arrays in any case, even if some might be populated only with one item inside.

PS:
thanks for your well formed and extremely useful prototype.
;-)

msg9 { JasonM [+], posted: 11.08.04 10a•-, top [^] }

Do you have an example of your case...?

msg10 { indivision [+], posted: 11.08.04 10a•-, top [^] }

I think what he means is that it would be easier to skip detecting whether or not the data was an array. So, if there was only one node, it would be an array with one piece of data rather than an object.

msg11 { gAntico {alt123} [+], posted: 11.08.04 12p•11.08.04 3p, top [^] }

Yes indivision, it's exactly what I wanted to say.

My case was a news archive based on a XML, where I had a root node "year", the child "month", the child "day" and the child "hour". Each final news node had other nodes like "pictures", "pdf_version", "links", ecc. This meant that I could have not just cycled in the same way all the objects created: I had verify which ones were array and which ones were objects, beacuse a different sintax is required in order to access them. I had to verify each node: if in a year there was one or more months, if in a month there was one or more days, if in a day one or more hours, if in a news one or more pictures, one or more pdf, one or more links...

This is just an example, but I think that this could be quite common. If I imagine a catologue, with different brands, product lines, product types, product details, infos, ecc. I definetely would like to skip the detection process to see if I have one or more nodes in each case.

Thank you jasonM for asking and for taking time for going further with your "must-have" prototype.

msg12 { gAntico {alt123} [+], posted: 11.08.04 3p•11.08.04 3p, top [^] }

//-------------------------------------------------------------------------------------------//
// THIS IS HOW I HAD TO WRITE THE CODE FOR 3 CICLES:
//-------------------------------------------------------------------------------------------//

newsLong = news_xml.makeObj();

var myNode1 = newsLong.root.year;
if (myNode1._type != "array") {	
	listYear = [myNode1];	
} else {	
	listYear = myNode1; 
}
			
for (y=0; y<listYear.length; y++) {
	
	var myNode2 = listYear[y].month;
	if (myNode2._type != "array") {	
		listMonth = [myNode2];	
	} else {	
		listMonth = myNode2;	
	}
	
	for (m=0; m<listMonth.length; m++) {
		
		var myNode3 = listMonth[m].news;
		if (myNode3._type != "array") {	
			listNews = [myNode3];	
		} else {	
			listNews = myNode3;		
		}
	
		for (n=0; n<listNews.length; n++) {
			trace (listNews[n].myTitle);
		}
	}
}

//-------------------------------------------------------------------------------------------//
// THIS IS HOW I WOULD LIKE TO WRITE IT
//-------------------------------------------------------------------------------------------//

newsLong = news_xml.makeObj();
listYear = newsLong.root.year;			

for (y=0; y<listYear.length; y++) {
	for (m=0; m<listYear[y].month.length; m++) {
		for (n=0; n<listYear[y].month[m].news.length; n++) {
			trace (listYear[y].month[m].news[n].myTitle);
		}
	}
}

msg13 { JasonM [+], posted: 11.08.04 3p•11.21.04 1p, top [^] }

** Well *I could* implement this in the method by providing a paramter flag which specifies that ALL the nodes are to be created as Arrays.

Since the process would have no (safe) way of knowing that the node was "supposed" to have a series of values instead of one.

The trouble with this is it messes with all your node addresses...

root[0].mybranch[0].mytwig[0].myleaf[9]

not much fun...!

** The other alternative which has just struck me is to provide all the list nodes in advance, e.g. something like...

myXML.makeObj(["listnodes", "morelistnodes"])

I'd be interested to hear which people would think are more helpful...

**
I've been intending to add dynamic datatyping for the method too, so perhaps I can add these to the method at the same time.

msg14 { indivision [+], posted: 11.08.04 4p•11.08.04 5p, top [^] }

That's a good point about the messiness of item[0].subitem[0] etc.

Here are some protos I've been using to get around the problem:

Object.prototype.nodeLen = function() {
	if (this._type eq "array") {
		return this.length;
	} else {
		return 1;
	}
};
Object.prototype.nodeNum = function(z) {
	if (this._type eq "array") {
		return this[z];
	} else {
		return this;
	}
};

So, instead of using this syntax (which doesn't work if there is one node):

for(var i=0;i<mainxml.category[5].item.length;i++){
    trace(mainxml.category[5].item[i]);
}

You would use:

for(var i=0;i<mainxml.category.nodeNum(5).item.nodeLen();i++){
    trace(mainxml.category.nodeNum(5).item.nodeNum(i));
}

It's a little more code, but it saves writing additional array parameter checks in loops where there may be several or only one node.

While I'm here, here is another proto that loads an XML file into an object, runs the makeObj proto on it and then executes a designated function:

MovieClip.prototype.getXML = function(url, target, f, p, o) {
	target = this add "." add target;
	var myXML = new XML();
	myXML.ignoreWhite = true;
	myXML.load(url);
	myXML.onLoad = function() {
		set(target, myXML.makeObj());
		f.apply(o, p);
	};
};

Syntax for this: getXML("myXMLfile.xml","myDataObject",myFunction,[p],[o]);

p and o are optional parameters if the function needs to be applied to an object with parameters.

msg15 { gAntico {alt123} [+], posted: 11.08.04 5p•11.08.04 5p, top [^] }

It might be already clear that I'm a fan of the array sintax, but I think it's for a good reason: the power of cycling blindly even the most "branching" structure. JasonM, I'm voting certainly for your first option (a flag which specifies that ALL the nodes are to be created as Arrays), because in this way I could use it even without knowing how is formed the XML that I'm going to parse.

As an heavy user of your prototype, I can say that the reason why I love it is the chance to forget the tedious process of parsing XML manually and also the XML itself. I mean that with makeObj I don't even look how the XML is generated by back-ends, by software engineers or other people working on the same project. I just parse it and use the parsed objects.

I would be very happy if I could cicle the parsed objects without dealing with the "detect if it's an array", neither thinking in advance which node should be transformed in list and which not. Thanks again JasonM.

PS
Thanks indivision for your additional prototypes. I will use them while waiting the new JasonM's XML.makeObj() (super-optimized).
:-)

msg16 { JasonM [+], posted: 11.09.04 2a•-, top [^] }

Thanks Indivision, those are some excellent proto's...

(more from me soon, v.busy right now)

msg17 { max0matic [+], posted: 11.23.04 9a•11.25.04 3a, top [^] }

I did write XMLSA... that does both ways XML->Obj->XML
But somethimes this is to much and I didn't update it for ages..
anyway... I found this little proto usefull but I tweaked it a little
with my knowlege gained on the XMLSA development...
so check this out:

- added Array notation in any case
- removed _type no need for that anymore
- grouped all attributes under "attributes" so nodenames and attribs can have the same name
- added resolver to acces first Array element if none is given
- added the proto to XMLNode rather then XML
- renamed it to makeXMLSA so things don't get messy

XMLNode.prototype.makeXMLSA = function(xObj, obj) {
	//----- Initialise objects
	if (xObj == null) {
		xObj = this;
	}
	if (obj == null) {
		obj = {};
	}
	var a, c, nName, nType, nValue, cCount;
	//----- Add attributes to the object
	obj.attributes = new Object();
	for (a in xObj.attributes) {
		obj.attributes[a] = xObj.attributes[a]
	}
	//----- Build child nodes
	for (c in xObj.childNodes) {
		nName = xObj.childNodes[c].nodeName;
		nType = xObj.childNodes[c].nodeType;
		nValue = xObj.childNodes[c].nodeValue;
		if (nType == 3) {
			obj._value = nValue;
		}else if (nType == 1 && nName != null) {
			if (!(obj[nName]  instanceof Array)){
				obj[nName] = new Array();
				obj[nName].__resolve = function(found){return this[0][found];};
				ASSetPropFlags(obj[nName],null,1,1);
			}
			obj[nName].unshift(this.makeXMLSA(xObj.childNodes[c], {}));
		}
	}
	// Return object
	return obj;
};

Okay so what's possible now?
Let me give you some examples...

lets assume you have a xmlfile like this:

<portfolio>
   <web>
      <job month="01" year="2002">
         <href>http://www.nike.com</href>
         <desc>this was a job for nike</desc>
      </job>
      <job month="04" year="2002">
         <href>http://www.audi.com</href>
         <desc>this job was made with Flash</desc>
      </job>
   </web>
   <print>
      <job month="14" year="2003">
         <desc>A flyer</desc>
      </job>
   </print>
</portfolio>

Now some example to acces the data:

// first parse the Data (see above box)
xmlString = '<portfolio><web><job month="01" year="2002"><href>http://www.nike.com</href><desc>this was a job for nike</desc></job><job month="04" year="2002"><href>http://www.audi.com</href><desc>this job was made with Flash</desc></job></web><print><job month="14" year="2003"><desc>A flyer</desc></job></print></portfolio>';
// [NOTE] used firstChild here so we woun't end up with portfolio.portfolio
portfolio = new XML(xmlString).firstChild.makeXMLSA();

trace("XMLNode.makeXMLSA EXAMPLES");
trace("direct access on values:");
//outputs "http://www.nike.com"
trace("\tportfolio.web.job.href._value = "+portfolio.web.job.href._value); 

//outputs "http://www.nike.com" (the same but we used a index on job!)
trace("\tportfolio.web.job[0].href._value = "+portfolio.web.job[0].href._value);

//outputs "http://www.audi.com" (we used the second index on job ...starting at 0!)
trace("\tportfolio.web.job[1].href._value = "+portfolio.web.job[1].href._value);

//do a loop when ever you want because its allways a array!
trace("\nnow in a loop over jobs in web:");
for (var c=0;c<portfolio.web.job.length;c++) {
    trace("\tportfolio.web.job["+c+"].href._value = "+portfolio.web.job[c].href._value);
}

trace("\ndirect access on attriubtes:");
//outputs "2002"
trace("\tportfolio.web.job.attributes.year = "+portfolio.web.job.attributes.year); 

trace("\nnow for..in loop over attributes:");
// access attributes now through "attributes" this should be a reseverd word!
// don't use it as a nodeName...
for (var found in portfolio.web.job.attributes) {
    trace("\tportfolio.web.job.attributes."+found+" = "+portfolio.web.job.attributes[found]);
}

let me know what you think...

msg18 { max0matic [+], posted: 11.24.04 11a•11.25.04 3a, top [^] }

Even more optimisation:

//-----------------------------------------------------------
// XML.makeObj by J.Milkins
// XMLNode.makeXMLSA tweak by Max Ziebell 2004/11
//-----------------------------------------------------------
XMLNode.prototype._mxr = function(f){return this[0][f];}
XMLNode.prototype._mxp = function(xObj, obj) {
	var c, nName, nType, cNode;
	//----- Add attributes to the object
	if (xObj.attributes!=undefined){
		obj.attributes = {};
		var oa = obj.attributes;
		var xa = xObj.attributes;
		for (c in xa) oa[c] = xa[c];
	}
	//----- Build child nodes
	for (c in xObj.childNodes) {
		cNode = xObj.childNodes[c];
		nName = cNode.nodeName;
		nType = cNode.nodeType;
		if (nType == 3) {
			obj._value = cNode.nodeValue;
		}else if (nType == 1 && nName != null) {
			if (!(obj[nName] instanceof Array)){
				obj[nName] = new Array();
				obj[nName].__resolve = this._mxr;
				ASSetPropFlags(obj[nName],null,1,1);
			}
			obj[nName].unshift(this._mxp(cNode, {}));
		}
	}
	// Return object
	return obj;
};
//wrapper for _mxp
XMLNode.prototype.makeXMLSA = function(noRoot) {
	return (noRoot==true) ? this._mxp(this.firstChild,{}) : this._mxp(this,{});
};
//hide from for..in
ASSetPropFlags(XMLNode.prototype,['makeXMLSA','_mxp','_mxr'],1,1);

In this version you can use a noRoot flag to avoid above problem:

portfolio = new XML(xmlString).firstChild.makeXMLSA();
equals
portfolio = new XML(xmlString).makeXMLSA(true);

this is not final... but works 100%
I say not final because it would be better to put _mxp and _mxr in
a own prototype as the are not related in any way to XML as we are
creating a object structure the hole tree could be embed in a own
class spawned (template-pattern) from Object.
Anyway.. this is what I did in XMLSA but maybe we should keep things
simple here :-)

msg19 { b0b [+], posted: 12.07.04 8a•12.07.04 8a, top [^] }

In the latest version this line always returns undefined for me... Even with your example code.

if (xObj.attributes!=undefined){

I changed that whole loop to:

	obj.attributes = {};
	var oa = obj.attributes;
	var xa = xObj.attributes;
	for (var c in xa) {
		oa[c] = xa[c];
	}
	if(!oa.sizeOf() > 0) {
		delete obj.attributes;
	}

and i added in:

Object.prototype.sizeOf = function() {
	var counter = 0;
	for(var item in this) {
		counter++;
	}
	return counter;
}

ASSetPropFlags(Object.prototype,'sizeOf',1,1);

Let me know if I'm crazy or if there's a better way...

--r

msg20 { max0matic [+], posted: 12.07.04 9a•12.07.04 9a, top [^] }

Here's the fixed version:

http://proto.layer51.com/d.aspx?f=1311
(I moved this to a own thread...)

Notes on new version found behind link!

Rather then using a sizeOf I would suggest to always build the attributes child
this makes things faster and less dependant...

regards

Max

msg21 { JasonM [+], posted: 02.02.05 3p•02.02.05 3p, top [^] }

It's a terrible place to do this I know, but I have 3 GMail invites to get rid of, just pop over to my blog and post a comment if you need one...

(and apologies for being so horribly off topic!)

www.mentalaxis.com/blog

msg22 { livingeachday [+], posted: 04.12.05 12p•-, top [^] }

so i've noticed with this code that if i'm parsing element nodes with no siblings
that the code chokes and returns nothing for that particular node values...

ie if my xml is

<xml>
<photos>
<photo />
</photos>
<texts>
<text />
<text />
</texts>

</xml>

it reads in the text nodes fine, but wont read the <photo> node. anyone have any ideas of a way around this?

thanks,
tom