ngRepeat, JSON, angularJS - duplicates are not allowed - via template in directive

Question

UPDATE:

I found that if I'm passing the JSON file in controller like this:

controller('dynamicMenuCtrl', ['$scope', function ($scope) {

    $scope.mainmenu2 = [
            {
                "id": "bananas",
                "title": "Bananas",
                "href": "#/bananas",
                "li-class": "menu-element"
            },
            {
                "id": "apples",
                "title": "Apples",
                "li-class": "dropdown"
                "submenu": [
                    {
                        "id": "apple-lot",
                        "title": "Apples lots",
                        "href": "#/apples/lot"                  
                    },
                    {
                        "id": "apple-series",
                        "title": "Apples series",
                        "href": "#/apples/series"
                    }               
                ]
            },
            {
                "id": "cherries",
                "title": "Cherries",
                "href": "#/cherries",
                "li-class": "menu-element"
            }
        ]

        });

instead of getting it via $http.get

my navigation-bar is working properly. I'm calling it in my HTML as:

<li ng-repeat=item in mainmenu2>"

UPDATE 2: If you are using MVC app, you have to register JSON file in Web.config

<system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json; charset=UTF-8"/>
    </staticContent>
</system.webServer>

Then all will be fine

I have a problem, I have a JSON file:

{
    "mainmenu": [
        {
            "id": "bananas",
            "title": "Bananas",
            "href": "#/bananas",
            "li-class": "menu-element"
        },
        {
            "id": "apples",
            "title": "Apples",
            "li-class": "dropdown"
            "submenu": [
                {
                    "id": "apple-lot",
                    "title": "Apples lots",
                    "href": "#/apples/lot"                  
                },
                {
                    "id": "apple-series",
                    "title": "Apples series",
                    "href": "#/apples/series"
                }               
            ]
        },
        {
            "id": "cherries",
            "title": "Cherries",
            "href": "#/cherries",
            "li-class": "menu-element"
        }
    ]
}

I want to make a navigation bar from this JSON file. I'm using AngularJS to make this (only Angular is allowed in this case).

I made an controller to get this JSON file:

angular.module('dynamic-menu').controller('dynamicMenuCtrl', ['$scope', '$http', function ($scope, $http) {
    $http.get('MenuItems.json').success(function (data) {

        $scope.mainmenu = data;
    });

Then I want to make an navigation bar in my HTML:

    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="nav-bar" style="margin-bottom: 0.5%">"
        <div class="container-fluid">
            <div class="navbar-header">
                <span class="navbar-brand">TITLE</span>
            </div>
            <div class="collapse navbar-collapse">
                <span class="navbar-brand">
                    <ul class="nav navbar-nav">
                        <li ng-repeat="item in mainmenu">
                            <a href="{{item.href}}">{{item.title}}</a>
                        </li>
                    </ul> <!-- /.nav navbar-nav -->
                </span> <!-- /.navbar-brand -->
            </div> <!-- /.navbar-collapse-->
        </div> <!-- /.container-fluid-->
    </nav>

Then I'm getting an error Error:

[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in mainmenu, Duplicate key: string:<, Duplicate value: "<"

I tried to use an expression trackby $index but it's not rendering in a way I want. There is a looooot of copies of something but I don't know what is wrong. Maybe I have something wrong in my JSON file or in Controller?

EDIT: Can you see and edit this plunkr? http://plnkr.co/edit/U1xG2E4ys7SGz7WxBtvq?p=preview

It also didn't work, maybe I'm writing something wrong? I also corrected my JSON file in this post, and the error expression

EDIT2: What if I want to make the HTML via directive?

angular.module('dynamic-menu').directive('menuTemplate', function () {
    return {
        restrict: 'E',
        template: "<nav class=\"navbar navbar-inverse navbar-fixed-top\" role=\"navigation\" id=\"nav-bar\" style=\"margin-bottom: 0.5%\">"
                        + "<div class=\"container-fluid\">"
                            + "<div class=\"navbar-header\">"
                                + "<span class=\"navbar-brand\">TITLE</span>"
                            + "</div>"
                            + "<div class=\"collapse navbar-collapse\">"
                                + "<span class=\"navbar-brand\">"
                                        + "<ul class=\"nav navbar-nav\">"
                                            + "<li ng-repeat=\"item in mainmenu\">"
                                                + "<a href=\"{{item.href}}\">{{item.title}}</a>"
                                            +"</li>"
                                        +"</ul> <!-- /.nav navbar-nav -->"
                                    +"</span> <!-- /.navbar-brand -->"
                                +"</div> <!-- /.navbar-collapse-->"
                            +"</div> <!-- /.container-fluid-->"
                        +"</nav>"
           };
}]);

EDIT 3: I updated my plunkr and now it's working:

http://plnkr.co/edit/U1xG2E4ys7SGz7WxBtvq?p=preview

I created also a directive and it also working. I don't know why it's working in Plunkr, but didn't in my project :(

@vp_arth, from OP: I tried to use an expression trackby $index but it's not rendering in a way I want. — Grundy
– Grundy, Commented Jul 17, 2015 at 8:17
Actual error is: Repeater: item in content, Duplicate key: string:< You iterate something wrong... — vp_arth
– vp_arth, Commented Jul 17, 2015 at 8:18
Repeater: item in mainmenu - I corrected this line, because content was my previous name of mainmenu - Sorry — kamyk
– kamyk, Commented Jul 17, 2015 at 8:33
instead using one solution in plunker you try use all, and also you include angular after custom script, this works: plnkr.co/edit/bZrw14kuxvvCXVmDCW5a?p=preview — Grundy
– Grundy, Commented Jul 17, 2015 at 8:33

Siddharth · Accepted Answer · 2015-07-17 08:14:39Z

4

Data you are getting is an object which contains an mainmenu key which is array of objects. So in your controller use:

$http.get('MenuItems.json').success(function (data) {

        $scope.mainmenu = data.mainmenu;
    });

Further your mainmenu array contains some object which have donot have href and title values but it has submenu property (array too)which contains href and title values.

Use this :

 <li ng-repeat="item in mainmenu track by $index">
    <a ng-if="!item.submenu" href="{{item.href}}">{{item.title}}</a>
    <a ng-if="item.submenu">{{item.title}}
      <ul ng-repeat="subitem in item.submenu">
       <li>
         <a href="{{subitem.href}}">{{subitem.title}}</a>
       </li>
      </ul>
    </a>
 </li>

edited Jul 17, 2015 at 8:14

answered Jul 17, 2015 at 8:08

Siddharth

7,1762 gold badges23 silver badges34 bronze badges

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

Comments

chiragchavda.ks · Accepted Answer · 2015-07-17 07:52:42Z

3

Instead of this

<span ng-repeat="motto in mottos"> {{motto}} </span>

try something like this

<span ng-repeat="motto in mottos track by $index"> {{motto}} </span>

you can see this in more detail on this page

P.S. this is posible duplicate question of stack overflow question

edited Jul 17, 2015 at 7:52

answered Jul 17, 2015 at 7:46

chiragchavda.ks

5307 silver badges25 bronze badges

4 Comments

kamyk Over a year ago

I tried this, but something is wrong. I'm getting an empty <a class="ng-binding" href=""></a> items (and there is a lot of this items, I don't know why) edit - I read a lot of similar topics and I didn't find the answer :(

chiragchavda.ks Over a year ago

There some issue with JSON you are using and use mainmenu.mainmenu in ng-repeat or you can just fix the json

kamyk Over a year ago

I tried with mainmenu.mainmenu and there is nothing in my navigation-bar <span class="navbar-brand"> <ul class="nav navbar-nav"></ul> </span>

chiragchavda.ks Over a year ago

Create plunker or fiddle if possible

Nikhil Batra · Accepted Answer · 2015-07-17 09:45:31Z

3

There are few problems in your code:

1) JSON is not valid. This is the valid JSON:

{
    "mainmenu": [
        {
            "id": "bananas",
            "title": "Bananas",
            "href": "#/bananas",
            "li-class": "menu-element"
        },
        {
            "id": "apples",
            "title": "Apples",
            "li-class": "dropdown",
            "submenu": [
                {
                    "id": "apple-lot",
                    "title": "Apples lots",
                    "href": "#/apples/lot"
                },
                {
                    "id": "apple-series",
                    "title": "Apples series",
                    "href": "#/apples/series"
                }
            ]
        },
        {
            "id": "cherries",
            "title": "Cherries",
            "href": "#/cherries",
            "li-class": "menu-element"
        }
    ]
}

2) $scope.mainmenu has itself a mainmenu key which is array, so in ng-repeat on the mainmenu key as:

 <li ng-repeat="item in mainmenu.mainmenu">

Editing: Using $http.get to get the json.

See the plunkr: "http://plnkr.co/edit/Kcl2uVeWg03bawagdQpm?p=preview"

edited Jul 17, 2015 at 9:45

answered Jul 17, 2015 at 7:57

Nikhil Batra

3,14816 silver badges20 bronze badges

5 Comments

Grundy Over a year ago

your plunkr not load json

Nikhil Batra Over a year ago

Yea because i don't have url for the json, it has to be hard coded you see.

Grundy Over a year ago

in plunkr you can create file, and load it

Nikhil Batra Over a year ago

Yes we can but main logic of the question is how to use it after it has been successfully loaded. The technique of loading json can be anyway changed by the OP.

Grundy Over a year ago

nope, main problem in how use result from success callback

Collectives™ on Stack Overflow

ngRepeat, JSON, angularJS - duplicates are not allowed - via template in directive

3 Answers 3

Comments

4 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related