2

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

mynameisnotallowed
  • 564
  • 1
  • 11
  • 34

1 Answers1

3

You can, if you use ng-repeat="(key, value) in master"

Then you can simply do:

{{translation[key]}}

This question answers how to do the basics of key value looping.

This is also building a tree in Ang

I haven't used Vue.js, but you should be able to do this by using key, value looping, and nesting key value loops inside.

This is the Vue equivalent:

<ul id="repeat-object"> <li v-repeat="primitiveValues">{{$key}} : {{$value}}</li> <li v-repeat="objectValues">{{$key}} : {{msg}}</li> </ul>

What I'm not sure about in Vue, is if you can access [] notation in the DOM. You want {{translation[$key]}}, not sure if you can access data like that in Vue. You can in Angular.

Community
  • 1
  • 1
SamMorrowDrums
  • 552
  • 5
  • 15