How to retrieve data from nested json object using ng-repeat

Question

I'm trying to retrieve the EmpName from the below mentioned JSON object using ng-repeat.

My js file:

$scope.items = [];
        $scope.allItems = [{

        "categoryId": 1,
        "categoryName": "abc",
        "Employee": [{
            "EmpId": 1,
            "EmpName": "Raj",
            "EmpJob": "Accounts",
            "DataList": [{
                "year": "Oct-2015",
                "salary": "244"
            },
            {
                "year": "Jul-2015",
                "salary": "100"
            },
            {
                "year": "Jun-2015",
                "salary": "117"
            }]
        }]
    },
    {
        "categoryId": 2,
        "categoryName": "xyz",
        "Employee": [{
            "EmpId": 2,
            "EmpNameName": "Sita",
            "EmpJob": "Software Engineer",
            "DataList": [{
                "year": "Oct-2015",
                "salary": "244"
            },
            {
                "year": "Jul-2015",
                "salary": "100"
            },
            {
                "year": "Jun-2015",
                "salary": "117"
            }]
        }]
    }]
}]

My html:

<div id="Div1" ng-repeat="item in allItems">
  <div id="Div2" >
     <div id="Div3">
       <font color="white">{{item.EmpName}}</font>
     </div>
  </div>
</div>

Here I'm pushing allItems into items array.Then how can I retrieve EmpName from items array.Can anyone please help me out regarding this issue ...

Zohaib Ijaz · Accepted Answer · 2016-02-07 11:55:07Z

1

YOu can do something like Every item contains Employee Array with only one Employee object. So you can get first item from Employee list and then get it's EmplyeeName

 <div id="Div1" ng-repeat="item in items" >
     <div id="Div2" >
          <div id="Div3"><font color="white">{{item.Employee[0].EmpName}}</font>                  </div>
  </div>

edited Feb 7, 2016 at 11:55

answered Feb 7, 2016 at 11:48

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

1 Comment

dev777 Over a year ago

Thanks a lot for ur help

gnerkus · Accepted Answer · 2016-02-07 11:53:51Z

According to the $scope.allItems array each item has a Employee property which is also an array:

{
  "categoryId": 1,
  "categoryName": "abc",
  "Employee": [
    {
      "EmpId": 1,
      "EmpName": "Raj",
      "EmpJob": "Accounts",
      "DataList": [
        {
          "year": "Oct-2015",
          "salary": "244"
        },
        {
          "year": "Jul-2015",
          "salary": "100"
        },
        {
          "year": "Jun-2015",
          "salary": "117"
        }
      ]
    }
  ]
}

This property contains just one object which contains the EmpName property. Hence, to obtain the EmpName property, you'll need to access it via the first item of the Employee array:

<div id="Div1" ng-repeat="item in allItems">
  <div id="Div2" >
     <div id="Div3">
       <font color="white">{{item.Employee[0].EmpName}}</font>
     </div>
  </div>
</div>

Collectives™ on Stack Overflow

How to retrieve data from nested json object using ng-repeat

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related