Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up

In my directive I am calling a function that's returning me the content of a JSON file, the content looks like this:

{
    "UpdatedBy" : "Naguib",
    "UpdatedOn" : "29/09/2016",
    "UpdatedFrom": "data.doc",
    "100":
    [
        {
            "title":"Class View",
            "overview":"TBC",
            "menuItem":"TBC",
            "UpdatedBy" : "Naguib",
            "UpdatedOn" : "29/09/2016"
        }
    ],
    "101":
    [
        {
            "title":"Time Table",
            "overview":"TBC",
            "menuItem":"TBC",
            "UpdatedBy" : "Naguib",
            "UpdatedOn" : "29/09/2016"
        }
    ]
}

The function is working fine and returning me a JSON array in $scope.helptext So when I call helptext from HTML and pass the index of the first dimention it returns an array with the data but I can't get any data in the nested array:

 <pre>
        ONE
        {{helptext[101]}}
        TWO
        {{helptext[101].menuItem}}
        THREE
        {{helptext[101][menuItem]}}
        FOUR
        {{helptext[101]['menuItem']}}
 </pre>

returns

The html that is generated is exactly how it looks:

<pre class="ng-binding">                
                ONE
                [{"title":"Time Table","overview":"TBC","menuItem":"TBC","UpdatedBy":"Naguib","UpdatedOn":"29/09/2016"}]
                TWO

                THREE

                FOUR

</pre>

Any help is appreciated!

share|improve this question
1  
See Access / process (nested) objects, arrays or JSON ... the output of your object clearly shows that the values of helptext[100] and helptext[101] are arrays. Arrays don't have a menuItem property. The objects contained in these arrays do. This has nothing to do with Angular, only with how you structure your data and how to access objects/arrays. – Felix Kling 23 hours ago
    
You're right @FelixKling I removed the Angular JS tag and any references to it from my question. – Naguib Ihab 16 hours ago
up vote 2 down vote accepted

You need to access each of them like an array: {{helptext[101][0].menuItem}}

If you need to display each possible menuItem nested within those 100, 101, etc. arrays, look into using ngRepeat

Something like this should help get you started:

<pre ng-repeat="menuData in helptext[101]">{{menuData.menuItem}}<pre>
share|improve this answer
    
Thanks, I can confirm that the following worked: {{helptext[101][0].menuItem}} {{helptext[101][0]['menuItem']}} – Naguib Ihab 22 hours ago

Can you try TWO

{{helptext[101][0].menuItem}}
share|improve this answer
    
Aah I see @Sebastian beat me to it by a min... – Pratik Gaikwad 23 hours ago

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.