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>

edited Jul 13, 2015 at 10:01

answered Jul 13, 2015 at 9:43

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

James Ives Over a year ago

While this works, that only grabs the first one instead of everything. If there were 100 titles how would I grab all of them?

Sudharsan S Over a year ago

Again you loop again towards ul that solve, I update it wait a min

Sudharsan S Over a year ago

@JamesIves Updated check

James Ives Over a year ago

Works great. Not sure why I didn't think of that! Thank you.

Roy M J Over a year ago

@JqueryKing: Doesnt the second ng-repeat simply loops the entire ul?

Collectives™ on Stack Overflow

Looping over multiple json arrays with Angular

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related