ngTagsInput does not seem to be supporting objects inside a JSON string

Question

My CakePHP application generates a JSON output of all my categories as shown below:

{
    "categories": [
        {
            "Category": {
                "id": "7",
                "name": "Elektronics"
            }
        },
        {
            "Category": {
                "id": "8",
                "name": "Gym"
            }
        },
        {
            "Category": {
                "id": "4",
                "name": "Nightlife"
            }
        },
        {
            "Category": {
                "id": "6",
                "name": "Shopping "
            }
        },
        {
            "Category": {
                "id": "2",
                "name": "Sport"
            }
        }
    ]
}

How can I use this data with the ngTagsInput plugin? I tried it like this but it always shows an error. It seems like it cannot handle multiple objects.

<label class="item item-input item-stacked-label">
  <span class="input-label">Categories</span>
  <tags-input ng-model="tags" display-property="Category.name" placeholder="New Category">
    <auto-complete source="loadTags($query)"></auto-complete>
  </tags-input>
</label>

Error:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tag in tagList.items track by track(tag), Duplicate key: undefined, Duplicate value: {"Category":{"id":"7","name":"Electronics"}}
http://errors.angularjs.org/1.4.3/ngRepeat/dupes?p0=tag%20in%20tagList.item…2%3A%7B%22id%22%3A%225%22%2C%22name%22%3A%22Essen%20und%20Trinken%22%7D%7D
    at ionic.bundle.js:8900
    at ngRepeatAction (ionic.bundle.js:35974)
    at Object.$watchCollectionAction [as fn] (ionic.bundle.js:24382)
    at Scope.$digest (ionic.bundle.js:24515)
    at Scope.$apply (ionic.bundle.js:24783)
    at done (ionic.bundle.js:19196)
    at completeRequest (ionic.bundle.js:19368)
    at XMLHttpRequest.requestLoaded (ionic.bundle.js:19309)

Answer 1

UPDATE

You could create a function that converts your object in something that tags-input can understand.

var object = {
    "categories": [
        {
            "Category": {
                "id": "7",
                "name": "Elektronics"
            }
        },
        {
            "Category": {
                "id": "8",
                "name": "Gym"
            }
        },
        {
            "Category": {
                "id": "4",
                "name": "Nightlife"
            }
        },
        {
            "Category": {
                "id": "6",
                "name": "Shopping "
            }
        },
        {
            "Category": {
                "id": "2",
                "name": "Sport"
            }
        }
    ]
};

var categories = [];

for(var i = 0; i < object.categories.length; i++){
  var category = object.categories[i].Category;
  var categoryToPush = {
    id: category.id,
    name: category.name
  };
  categories.push(categoryToPush);
}

categories will contain:

[{
    "id": "7",
    "name": "Elektronics"
}, {
    "id": "8",
    "name": "Gym"
}, {
    "id": "4",
    "name": "Nightlife"
}, {
    "id": "6",
    "name": "Shopping "
}, {
    "id": "2",
    "name": "Sport"
}]

So then you can use it in the directive writing:

<tags-input ng-model="tags" display-property="name">
  <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>

OLD ANSWER

Add a key-property value:

<tags-input ng-model="tags" display-property="Category.name" key-property="Category.id" placeholder="New Category">
  <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>

Similar issue.