How to automatically update connected parts of json with angularjs

Question

I have next json structure:

{
"items": [
    {"name":"item1"},
    {"name":"item2"},
    {"name": "item3"}
],
"groups": [{
    "name": "group1",
    "items": ["item1", "item3"]
},
{
    "name": "group2",
    "items": ["item2", "item3"]
},
{
    "name": "group3",
    "items": ["item1", "item2"]
}]

}

As you can see in my groups I have names of the items. Is there a way in angularjs to automatically update strings in group > items, when the name of the particular item change. (Is there a way to connect particular parts of the json model?)

Thank you.

Michael Kang · Accepted Answer · 2014-07-27 05:41:01Z

3

You can set up a deep $watch for each item in the item array. When the item changes, iterate over the group items, and replace the old name with the new name:

angular.forEach($scope.model.items, function (item) {
    $scope.$watch(function () { return item; }, function (newVal, oldVal) {
        angular.forEach($scope.model.groups, function (group) {
            var items = group.items;
            var itemIndex = items.indexOf(oldVal.name);
            if (itemIndex >= 0) {
                items[itemIndex] = newVal.name;
            }
        });
    }, true);
});

Demo Fiddle

answered Jul 27, 2014 at 5:41

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

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

Collectives™ on Stack Overflow

How to automatically update connected parts of json with angularjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related