Trouble Nesting Datamaps in Twine 2.1 (Harlowe 2.0.1)

Question

I'm trying to create a sort of character status screen and laying the groundwork for how attributes and skills will be determined, and the best advice I've seen so far on how to do this has been to utilize nested datamaps. I was pretty careful to comb through debug mode and address all of the issues. I have several variables which are in turn set to datamaps, then listed as the values of a variable datamap entitled $playbook, all on a passage with the startup tag. I'll provide a link to a google document with the code here.

To test the code, I created a separate passage, fixed it as the starting point. The contents look like this:

 

 (print: $playbook)

 

Instead of printing a datamap with other datamaps nested inside it, however; it displays several raw lines of HTML (or CSS), like so:
 

Name:	Dame Calista Lavigne
Distinction:	Mesdame Valkyrie
Rank:	Knight Guarantor of the Imperial Defense Force
Fellowship:	Sisterhood of the Valyrie
Attentiveness	0
Basic Abilities	<table class=datamap><tr><td>Awareness</td><td>0</td></tr><tr><td>Investigation</td><td>0</td></tr><tr><td>Empathy</td><td>0</td></tr></table>
Influence	0
Social Abilities	<table class=datamap><tr><td>Rapport</td><td>0</td></tr><tr><td>Subterfuge</td><td>0</td></tr><tr><td>Connections</td><td>0</td></tr></table>
Numina	0
Psychic Abilities	<table class=datamap><tr><td>Magnitude</td><td>0</td></tr><tr><td>Channeling</td><td>0</td></tr><tr><td>Sixth Sense</td><td>0</td></tr></table>
Discipline	0
Mental Abilities	<table class=datamap><tr><td>Composure</td><td>0</td></tr><tr><td>Firearms</td><td>0</td></tr><tr><td>Intimidation</td><td>0</td></tr></table>
Conditioning	0
Physical Abilities	<table class=datamap><tr><td>Athleticism</td><td>0</td></tr><tr><td>Pilotry</td><td>0</td></tr><tr><td>Close Combat</td><td>0</td></tr></table>
Statistics:	<table class=datamap><tr><td>Gnosis Levels:</td><td>Current: Gnosis 0 Chance 3 Shock 3 Harm 3 's Gnosis / Maximum: Gnosis 2 Chance 3 Shock 3 Harm 3 's Gnosis</td></tr><tr><td>Chance Levels:</td><td>Current: Gnosis 0 Chance 3 Shock 3 Harm 3 's Chance / Maximum: Gnosis 2 Chance 3 Shock 3 Harm 3 's Chance</td></tr><tr><td>Shock Levels:</td><td>Current: Gnosis 0 Chance 3 Shock 3 Harm 3 's Shock / Maximum: Gnosis 2 Chance 3 Shock 3 Harm 3 's Shock</td></tr><tr><td>Harm Levels:</td><td>Current: Gnosis 0 Chance 3 Shock 3 Harm 3 's Harm / Maximum: Gnosis 2 Chance 3 Shock 3 Harm 3 's Harm</td></tr><tr><td>Experience:</td><td>Current: Experience 0 Advancements 2 's Experience / Spent: Experience 0 Advancements 0 's Experience</td></tr><tr><td>Advancements:</td><td>Current: Experience 0 Advancements 2 's Advancements / Spent: Experience 0 Advancements 0 's Advancements</td></tr></table>
Harm Tags:	<table class=datamap><tr><td>Faint</td><td>0</td></tr><tr><td>Lasting</td><td>0</td></tr><tr><td>Critical</td><td>0</td></tr></table>
Shock Tags:	<table class=datamap><tr><td>Faint</td><td> Rating 1 Slot 1 None. </td></tr><tr><td>Lasting</td><td> Rating 2 Slot 1 None. </td></tr><tr><td>Crippling</td><td> Rating 4 Slot 1 None. </td></tr></table>
Situation Tags:	<table class=datamap><tr><td>Situational Tags</td><td>None.</td></tr><tr><td>Permanent Tags</td><td>None.</td></tr></table>
Merits:	Work in Progress
History	<table class=datamap><tr><td>Vestal Kiani</td><td>0</td></tr><tr><td>Siuan Lockley</td><td>0</td></tr><tr><td>Governess Rowena Harcrowe</td><td>0</td></tr><tr><td>Devina Moreau</td><td>0</td></tr><tr><td>Lady Genevieve</td><td>0</td></tr><tr><td>Kiera Vasser</td><td>0</td></tr></table>

Can anyone tell me how I can get Twine to display the table instead of all of these table tags? Am I doing something wrong? Is it just an issue with this new version of Harlowe? Is there a workaround? I'm still fumbling around at this and very inexperienced, but I did make an effort to see if similar issues had cropped up. Closest thing I found was an issue with Harlowe in 2015, but I'm hoping this is unrelated. 

Thanks for your time.

Answer 1

Basically:

1. All (non-HTML element based) values need to be converted to the String data-type before they can be appended to the HTML page.

2. The Map object (which is what datamap is) doesn't impement conversion to String itself so it defaults to the Object object's method which always returns "[object Object]".

3. The Harlow developer decided that value returned in point 2 wasn't that helpful (for debugging purposes?) so they wrote code to output each of the Map's properties and their value using a HTML table.

4. Some String characters (like < & > / etc..) have special meaning in HTML so generally these characters are programmatically encoded before being appended to the HTML page. This encoding is what is causing the child HTML table looking content to appear as text instead of becoming actual HTML table elements.
eg. < becomes &lt; and > becomes &gt;

I don't know a way to overcome this, short of outputting each of the parent datamap's child Map based properties manually. I personally view the (print:) macro's ability to output complex Map objects as more of a debugging feature than a means to display content to an end-user.

Comments

That sucks. 

I've tried just about everything at this point. For some reason, some datamaps appear to have mostly nested just fine and others just become scrambled into HTML. I was using a variable to call the child datamaps, so I tried inserting them into the code wholesale, but I got the same result. 

2. The Map object (which is what datamap is) doesn't impement conversion to String itself so it defaults to the Object object's method which always returns "[object Object]".

Not sure I understand. What if the object's object is a datmap? It seems like other people have not only done this, but outright told other people that this is possible. It's really frustrating, seeing that it doesn't actually appear to be possible at all. 

I don't know a way to overcome this, short of outputting each of the parent datamap's child Map based properties manually. 

I've caved, and am now tediously going back to enter every individual field. It kind of sucks, because I wanted to give it a certain look and feel using nested datamaps. I intended to make this into a kind of fancy-looking dossier broken down by headers and subheaders. 

 I personally view the (print:) macro's ability to output complex Map objects as more of a debugging feature than a means to display content to an end-user.

 

It looks like it isn't actually necessary. Whether you use the (print:) macro or just call the datamap variable by itself doesn't really seem to matter, because it prints the full datamap either way. 

Thanks for your answer.
 

---

Whether you use the (print:) macro or just call the datamap variable by itself...

Using a (print:) macro or Variable markup to output the contents of a complex Object structure does basically the same thing internally, thus why you end up with a similar result for both methods.

You can store the information in a complex Object structure but you will need to handle the visualisation of that structure manually.