How can I access a child element of this JSON file with AngularJS?

Question

Here's a Plunkr showing a basic ng-repeat rendering of a JSON file:

Plunkr

I'm rendering elements from $scope.foodlist, like so:

        <li ng-repeat="food in foodlist">
            <p>Title: {{ food.title }}</p>
            <p>Code: {{ food.code }}</p>
            <p>Unit {{ food.unit }}</p>
        </li>

Because "unit" has a child element called "title", the above renders like so:

 Title: Walnußbrot
 Code: X 39 2000002
 Unit [{"title":"Scheiben"}]

Trying to target the title of the unit like this does not work:

 <p>Unit {{ food.unit.title }}</p>

How can I get the element "title" inside of "unit" to print? Do I need to add something extra to the Angular controller to target this child element?

AlwaysALearner · Accepted Answer · 2013-10-31 09:39:17Z

1

unit inside your json is a list.

So you need to do access the items either using indices or using ng-repeat:

<p>Unit {{ food.unit[0].title }}</p>

Or

<p ng-repeat="title in food.unit">Unit {{ title.title }}</p>

answered Oct 31, 2013 at 9:39

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

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

2 Comments

Ila Over a year ago

Thank you! Can you tell me, what is it in the JSON that defines unit as a list?

AlwaysALearner Over a year ago

The contents of unit are wrapped within [ and ] and that makes it a list.

Collectives™ on Stack Overflow

How can I access a child element of this JSON file with AngularJS?

Plunkr

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related