Angular translate : repeat on json object

Question

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

Your thumbnails property is not an array. You should fix your JSON-file to get it work. There is nothing wrong with your HTML code as far as I can see. — ArBro, Aug 26 '15 at 08:37
possible duplicate of [How to use ng-repeat for dictionaries in AngularJs?](http://stackoverflow.com/questions/11985863/how-to-use-ng-repeat-for-dictionaries-in-angularjs) — Julien, Aug 26 '15 at 08:45
@Julien, i don't think my problem is the same here. I don't know how to access a json object automatically loaded from angular translate "useStaticFilesLoader". — maxime1992, Aug 26 '15 at 08:52
@ABr, you and Mikos are rights. I changed my json file but still ... How to access the json object coming from angular translate "useStaticFilesLoader" ? I would need something like this : — maxime1992, Aug 26 '15 at 08:54
To help you understand what's my problem, i made a little plunkr here : http://plnkr.co/edit/mocztnQYvmmuc3Nslmnb?p=preview — maxime1992, Aug 26 '15 at 09:43

Mikos · Answer 1 · 2015-08-26T08:42:28.433

1

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": "...."
                }
            ]
        }
    ]
}

edited Aug 26 '15 at 08:42

answered Aug 26 '15 at 08:35

Mikos

31
7

Damn. I'm tired, you're right ! I changed it like you said, but in fact i don't think ng-repeat can access json file directly. At least, my code is not working. ``
– maxime1992 Aug 26 '15 at 08:51
I never use **useStaticFilesLoader** but your json have bad structure. u need this `
... ` or `
... `
– Mikos Aug 26 '15 at 09:00
Yes, as i said in my previous comment, i edited my JSON just as you said. With an array. Now that my json is correct, how can i do ? – maxime1992 Aug 26 '15 at 09:01
if you need know that your app have access to some position in JSON just type {{pages[1]}} then add {{pages[1].thumbnails}} i need url of first thumb {{pages[1].thumbnails[1].url}} :) and check your results :) [link](http://www.json-generator.com/) here check your JSON – Mikos Aug 26 '15 at 09:11
To help you understand what's my problem, i made a little plunkr here : http://plnkr.co/edit/mocztnQYvmmuc3Nslmnb?p=preview – maxime1992 Aug 26 '15 at 09:43
Oh ok its look like that useStaticFilesLoader can't read arrays (can't read JSON)... Its convert to same constants or what is it. (NAMESPACE.SUBNAMESPACE.HEADLINE) it is `"NAMESPACE" : {"SUBNAMESPACE": {"HEADLINE": "Text here...", "SUBHEADLINE": "Text here.."}}`... I try some "hack" for this but u need know count of thumbnails. Create controller and use **$translate** then you can use `$translate('YOUR_CONSTANT').then(function (translation) { "this code return promisse" });` – Mikos Aug 26 '15 at 10:26
Here is plnkr http://plnkr.co/edit/TRN2xKbyOQTOce0Bq7Ou?p=preview ... but this is realy not good practise... Use translate only for Static texts like buttons, placeholders, etc... Other text call from database like `/restAPI/page/1?lang=en` – Mikos Aug 26 '15 at 10:37
Wait for better programmer, I'm novice in angular (15 days) I don't know what is best practice. – Mikos Aug 26 '15 at 10:53

Angular translate : repeat on json object

1 Answers1