I don't know if what I'm trying to do is possible. I'm trying to create an Angular directive that repeats over a data object and prints out its values as well as the values of a second unrelated object with similar structure.
I'm working on a translation app where the master version of the language file is shown in one column and the translation is shown in the next. I would like to repeat through the master object and then also show the translation where there is one. I do not want to merge the two objects, because I would prefer to maintain two-way binding between the translation object and the DOM so it can be saved easily.
This is very simply what I'm trying to do:
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>
I'm asking this as an Angular question, but I plan on using vue.js. I do this because the Angular community is much bigger and because I believe concepts learnt from Angular are easily transposed onto vue.js. I don't want to use Angular itself, because a full framework is way more than I need.
Code example of vue.js redering an object as tree
Here is the repo for the project: https://github.com/jdwillemse/translation-utility
