0

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!

Naguib Ihab
  • 4,259
  • 7
  • 44
  • 80
  • 1
    See [Access / process (nested) objects, arrays or JSON](http://stackoverflow.com/q/11922383/218196) ... 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 Oct 04 '16 at 00:40
  • You're right @FelixKling I removed the Angular JS tag and any references to it from my question. – Naguib Ihab Oct 04 '16 at 07:19

2 Answers2

2

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>
segFault
  • 3,887
  • 1
  • 19
  • 31
  • Thanks, I can confirm that the following worked: `{{helptext[101][0].menuItem}}` `{{helptext[101][0]['menuItem']}}` – Naguib Ihab Oct 04 '16 at 00:49
1

Can you try TWO

{{helptext[101][0].menuItem}}
Pratik Gaikwad
  • 1,526
  • 2
  • 21
  • 44