How do you get objects object value from key in angular template?

Question

I have an object that looks like this:

{
    Kanaanbadet: {"desc":"Badplats med två stränder. Stor gräsyta. Hopptorn och utomhusdusch. Handikapptoalett finns. Välbesökt bad. Badet är bemannat med fritidsledare måndag till söndag kl 11 – 17 under sommarlovet. Stor parkeringsplats finns på gångavstånd, cirka 5 minuters promenad.","name":"Kanaanbadet","image":"http://www.stockholm.se/Web/Core/Pages/Special/StreamServiceGuideImage.aspx?path=%2fWeb%2fCore%2fPages%2fSpecial%2fServiceGuideFile.aspx%3ffileid%3d14b313cb2b2f45e380eb88156c95b539","_cached_page_id":"4b71e342c82be9de1c74de3c2f57ea1c4dde8150","long":"17.85448","lat":"59.34966","url":"http://www.stockholm.se/-/Serviceenhetsdetaljer/?enhet=cf0a856830e4422cb55dcd60e8e6b40b"},
    Johannelundsbadet:{"desc":"Liten badplats med liten sandstrand och stor gräsyta. Gungdjur, parksoffor och bord, torrklosett.","name":"Johannelundsbadet","image":"http://www.stockholm.se/Web/Core/Pages/Special/StreamServiceGuideImage.aspx?path=%2fWeb%2fCore%2fPages%2fSpecial%2fServiceGuideFile.aspx%3ffileid%3d3e4c2056b5534cfc9b0799e2377b8ce4","_cached_page_id":"18cf34222d74612979afd945a925abc0bf16e44d","long":"17.98914","lat":"59.34098","url":"http://www.stockholm.se/-/Serviceenhetsdetaljer/?enhet=ebf8d49780224e908064551c35dbcca4"},
}

In a template I can succesfully output the key, of each like this:

<a href="#/{{location}}" class="location" ng-repeat="(location, details) in locations">{{location}}</a>

I would like to output the key-value from the name of each objcect. I tried {{location.name}} inside the for-each, but it doesn't work.

first of all, you should use ng-href instead: docs.angularjs.org/api/ng/directive/ngHref — Khanh TO
– Khanh TO, Commented Mar 28, 2014 at 13:56

Khanh TO · Accepted Answer · 2014-03-28 13:59:43Z

1

First of all, you should use ng-href instead:

Using Angular markup like {{hash}} in an href attribute will make the link go to the wrong URL if the user clicks it before Angular has a chance to replace the {{hash}} markup with its value. Until Angular replaces the markup the link will be broken and will most likely return a 404 error.

From angular documentation

Try {{details.name}} instead of {{location.name}}:

<a ng-href="#/{{location}}" class="location" ng-repeat="(location, details) in locations">{{location}} {{details.name}} </a>

location is your keys: "Kanaanbadet" and "Johannelundsbadet"
details is your values for respective keys which have the name property

answered Mar 28, 2014 at 13:59

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

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

Collectives™ on Stack Overflow

How do you get objects object value from key in angular template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related