How to access nested objects in JSON using angular JS

Question

THis is the format of my JSON data:

[

 {

 "Department_id": "34",

 "Names": [

     "Jack Jones",

     "Matt Jones",

     "Lynn Lewis"

  ],

  "Employee-num": 3,

  "Salary-info": {

      "Jack Jones": 1000,

      "Matt Jones": 2920,

      "Lynn Lewis": 1500

    },

 },

]

How do you get the "salary-info"? And to display like the following:

Jack Jones: 1000

Matt Jones: 2920

Lynn Lewis: 1500

On jade, I try to access it using

p(ng-repeat='details in info.salary-info') {{ details }}

But it's not working and it only display a "0" on the screen.

info.Department_id works for displaying the department id of 34.

Problem solved.

The problem why nothing displayed is because of the hyphen exists on object names.

You need to access this kind of objects with a ' [" name of the object with a hyphen"] ',

like: {{ info["salary-info"] }}

instead of {{ info.salary-info }}.

Hopes it helps anyone having the same issue.

my guess is you could simplify api output for this ...people:[{name:'Jack',salary:100]}. Arrays can be sorted but objects can't. Also generally best not to use special characters in property names when it can be avoided — charlietfl
– charlietfl, Commented Sep 28, 2015 at 16:22

Richard Peterson · Accepted Answer · 2015-09-28 17:58:03Z

3

You can get keys and values from objects like so:

<span ng-repeat="(name, salary) in info['Salary-info']">{{name}} : {{salary}}</span>

https://docs.angularjs.org/api/ng/directive/ngRepeat#iterating-over-object-properties

edited Sep 28, 2015 at 17:58

answered Sep 28, 2015 at 16:12

Richard Peterson

8936 silver badges15 bronze badges

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

1 Comment

zihaow Over a year ago

<span ng-repeat="(name, salary) in info["salary-info"] > {{name}} : {{salary}}</span>

mab · Accepted Answer · 2015-09-28 16:44:01Z

Problem is the hyphen in Salary-info. For a demo, see this plunker.

index.html

<!-- Jack Jones: 1000 Matt Jones: 2920 Lynn Lewis: 1500 -->
<p ng-repeat="name in details.Names">
  {{name}}: {{details['Salary-info'][name]}}
</p> <!-- works -->

or

<p ng-repeat="(name, salary) in details['Salary-info']">
  {{name}}: {{salary}}
</p> <!-- works-->

or

<p ng-repeat="(name, salary) in details2.SalaryInfo">
  {{name}}: {{salary}}
</p> <!-- works -->

all works, but

<p ng-repeat="(name, salary) in details.Salary-info">
  {{name}}: {{salary}}
</p> <!-- fails!-->

fails.

Data

app.js

app.controller('MainCtrl', function($scope) {
  $scope.details =
      ...
        "Salary-info": {"Jack Jones": 1000, "Matt Jones": 2920, "Lynn Lewis": 1500},
      ...

  $scope.details2 =
      ...
      "SalaryInfo": {"Jack Jones": 1000, "Matt Jones": 2920, "Lynn Lewis": 1500},
      ...

tymeJV · Accepted Answer · 2015-09-28 16:08:16Z

2

The ngRepeat syntax for objects is (k, v) in obj - so you can do:

p(ng-repeat='(name, salary) in info.salary-info') {{ name }} : {{salary}}

answered Sep 28, 2015 at 16:08

tymeJV

105k14 gold badges165 silver badges158 bronze badges

3 Comments

zihaow Over a year ago

this syntax is working for "Names" since it is an array but I tried it for salary-info. It's not working.

tymeJV Over a year ago

@Brother_MW -- The above is object syntax - it won't work for arrays.

charlietfl Over a year ago

not sure will evalute - in property name using dot notation and also data has cap S ... info['Salary-info'] might be better

Collectives™ on Stack Overflow

How to access nested objects in JSON using angular JS

3 Answers 3

1 Comment

Data

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Data

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related