I am facing a challenge with creating an Angular directive that can iterate over a data object and display its values along with the values of a second unrelated object with similar structure.
Currently, I am developing a translation app where the original language file is displayed in one column while the translated version is shown in the next. My goal is to loop through the original object and also showcase the corresponding translation whenever available. I want to avoid merging the two objects so that the two-way binding between the translation object and the DOM remains intact for easy saving.
This is a simplified version of what I aim to achieve:
Objects
var master: {
face: {
a: aaa,
b: bbb,
c: ccc,
more: {
d: ddd,
e: eee
}
},
magic: magic,
test: test
}
var translation: {
face: {
c: cccc,
more: {
d: dddd
}
},
test: testttt
}
DOM output
<ul>
<li>
face
<ul>
<li>
<div>aaa</div>
<div></div>
</li>
<li>
<div>bbb</div>
<div></div>
</li>
<li>
<div>ccc</div>
<div>cccc</div>
</li>
<li>
more
<ul>
<li>
<div>ddd</div>
<div>dddd</div>
</li>
<li>
<div>eee</div>
<div></div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>magic</div>
<div></div>
</li>
<li>
<div>test</div>
<div>testttt</div>
</li>
</ul>
Although this query pertains to Angular, I intend to implement it using vue.js since the Angular community is larger, and I believe concepts learned from Angular can be easily adapted to vue.js. I prefer not to use Angular itself as Vue offers me just the right functionality without the excess baggage of a full framework.
Example code showcasing vue.js rendering an object as a tree
Find the project repository here: https://github.com/jdwillemse/translation-utility