Show json with AngularJS

Question

Im new to AngularJS. Now I have a json object from my spring controller, how do i use/print in my jsp?

I tried something like this. the console shows the json perfectely, and with angular it does not...

<div data-ng-init="stats=${stats}">
    <li data-ng-repeat="stat in stats">{{stat.name}}</li>
</div>

<script>
    console.log(${stats});
</script>

Json:

{ "Types": [{"name": "study", "value":0},{"name": "health", "value":0},{"name": "culture", "value":0},{"name": "nightlife", "value":0},{"name": "other", "value":0},{"name": "friendship", "value":0}] })

It should probably be: data-ng-repeat="stat in stats.Types". — Tony
– Tony, Commented May 29, 2015 at 21:15
What's displayed there isn't valid JSON, or even JavaScript which is causing angular to choke. — Tony
– Tony, Commented May 29, 2015 at 21:26

dfsq · Accepted Answer · 2015-05-29 21:36:33Z

2

Because JSON string must be properly quoted if placed into HTML attribure value, you either escape " characters in JSON or probably better use ' quotes for ngInit:

<div data-ng-init='stats=${stats}'>
    <li data-ng-repeat="stat in stats.Types">{{stat.name}}</li>
</div>

Demo: http://plnkr.co/edit/XLIE9VCSn9gL3oO6ULol?p=info

edited May 29, 2015 at 21:36

answered May 29, 2015 at 21:29

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Reactgular · Accepted Answer · 2015-05-29 21:33:20Z

2

You need to reference the array property of stats.

<li data-ng-repeat="stat in stats.Types">{{stat.name}}</li>

answered May 29, 2015 at 21:33

Reactgular

55.1k24 gold badges175 silver badges219 bronze badges

2 Comments

Vineet Over a year ago

Was it <div data-ng-init="stats=${stats}"> generating error ?

Reactgular Over a year ago

@Vineet I think dfsq answer addresses that problem.

Collectives™ on Stack Overflow

Show json with AngularJS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related