CODEWITHSUNDEEP
javascriptjsonangularjspug
zihaow
zihaow

Reputation: 322

How to access nested objects in JSON using angular JS

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.

Upvotes: 2

Views: 178

Answers (3)

Richard Peterson
Richard Peterson

Reputation: 883

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

Upvotes: 3

mab
mab

Reputation: 2772

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},
      ...

Upvotes: 2

tymeJV
tymeJV

Reputation: 104775

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}}

Upvotes: 2

Related Questions