Angular/Vue.js loop through two objects in same directive

Question

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

Community · Accepted Answer · 2017-05-23 12:14:34Z

3

+50

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.

edited May 23, 2017 at 12:14

CommunityBot

11 silver badge

answered Dec 3, 2014 at 10:50

SamMorrowDrums

5821 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mynameisnotallowed Over a year ago

Thanks a bunch! That tree example is not useful, but thats fine. Vue.js does support this square bracket notation.

Collectives™ on Stack Overflow

Angular/Vue.js loop through two objects in same directive

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related