Looping over multiple json arrays with Angular

Question

I have a large JSON file structured like the following which I'm trying to loop over in Angular:

    {
       "subject1":[
          {
             "title":"titlehere",
             "info":"infohere."
          }],

       "subject2":[
          {
             "title":"titlehere",
             "info":"infohere."
          }],
       "subject3":[
          {
             "title":"titlehere",
             "info":"infohere."
          }]
}

I want my page to grab the key for each 'category' and then the display the title underneath it. I'm able to get the key to display but I can't seem to figure out how to grab the string for each title. This is what I have in my HTML:

            <div ng-repeat="(key, value) in faqs">
            <h3>{{ key }}</h3>
              <ul>
                  <li><a href="#" ng-click="showHide(pageInfo)">{{ value }}</a></li>
              </ul>
            </div>

I'm not sure what I should be using instead of {{ value }} which grabs nothing but the entire JSON file as a string. I tried {{ value.title }} and still had no luck.

Any suggestions?

How do you know it's "pure JSON"? Have you checked what (typeof value) says? — ptrk
– ptrk, Commented Jul 13, 2015 at 9:44
I was using that as a way to describe that it's pulling the entire json object as a string. — James Ives
– James Ives, Commented Jul 13, 2015 at 9:49

Sudharsan S · Accepted Answer · 2015-07-13 10:01:41Z

3

Use {{ value[0].title }}

your code be

<div ng-repeat="(key, value) in faqs">
     <h3>{{ key }}</h3>
     <ul>
        <li ng-repeat="val in value"><a href="#" ng-click="showHide(pageInfo)">{{ val.title }}</a></li>
     </ul>
</div>