maxime1992
maxime1992

Reputation: 23813

Angular translate : repeat on json object

I have a json file like this :

{
    "pages": {
        "page1": {
            "field1": "....",
            "field2": "....",
            "field3": "....",
            "thumbnails": [
                {
                    "illustration": "images/img.png",
                    "content": "...."
                },
                {
                    "illustration": "images/img.png",
                    "content": "...."
                },
                {
                    "illustration": "images/img.png",
                    "content": "...."
                }
            ]
        },
        ......

When i want to use it in my html, i just do :
{{ 'pages.page1.field1' | translate }} for example

BUT

What if i need to repeat ? For thumbnails.

<div ng-repeat="thumbnail in pages.page1.thumbnails">
      {{ thumbnail.content }}
</div>

But obviously it's not working. I don't know how to access thumbnails.

EDIT 1 :

I'm using "useStaticFilesLoader" like this in my config :

$translateProvider.useStaticFilesLoader({
    prefix: 'assets/app_components/app/languages/emag_',
    suffix: '.json'
});

So i don't have a json defined into my controller.

EDIT 2 : To be more precise, here's a plunkr with what i exactly want to do : To help you understand what's my problem, i made a little plunkr here : http://plnkr.co/edit/mocztnQYvmmuc3Nslmnb?p=preview

Upvotes: 2

Views: 874

Answers (1)

Mikos
Mikos

Reputation: 31

You have bad json file.You have objects in object. You need array.

Try this.

{
"thumbnails": [
    {
        "illustration": "images/img.png",
        "content": "...."
    },
    {
        "illustration": "images/img.png",
        "content": "...."
    },
    {
        "illustration": "images/img.png",
        "content": "...."
    }
]

}

I think that ng-repeat works only with array because ng-repeat need know lenght.

Sry for bad english :)

Pages same problem.

{
    "pages": [
        {
            "fields": [
                "...",
                "...",
                "...."
            ],
            "thumbnails": [
                {
                    "illustration": "image/img_01.png",
                    "content": "...."
                },
                {
                    "illustration": "image/img_01.png",
                    "content": "...."
                },
                {
                    "illustration": "image/img_01.png",
                    "content": "...."
                }
            ]
        }
    ]
}

Upvotes: 1

Related Questions