How to Display data of an array within an object in angular 2 or higher

Question

My Data has 2 offices and another has one office

     "id": "1",
  "username": "test",
  "groups": "Admin",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    },
    {
      "officeid": "3",
      "officename": "stars"
    }
  ]
},         "id": "2",
  "username": "john",
  "groups": "guest",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    }
  ]
}

I want to display the office to textbox. If the data has 1 office, I should only display one textbox showing the office name and if the data has 2 offices, I should display 2 offices in a textbox.

                   <div class="form-group row">
                    <label class="col-md-2 control-label" for="text-input">Office</label>
                    <div class="col-md-4">
                        <label class="form-control underline"> {{(allUserData.office == "" ? "--No data--" : allUserData.office)}} </label>
                    </div>
               </div>

How should I display this in html. The above is my current html. I have tried to look at other *ngFor methods. They all seem not to work or I might have done it wrong. What is the proper way to retrieve the data? Thank you.

Complete this, it'll give you a basic understanding of Angular2. — sparcut
– sparcut, Commented Apr 4, 2017 at 3:36
already completed. I just want to know how should I retrieved array within an object. do you have any idea?tq — user3431310
– user3431310, Commented Apr 4, 2017 at 3:38
If you have completed it, you should know how to. You have to use a loop to display list of Heros... — sparcut
– sparcut, Commented Apr 4, 2017 at 5:16

Nugu · Accepted Answer · 2017-04-04 04:34:20Z

3

First of all the provided JSON structure has some errors, given is a correct version

[
  {
  "id": "1",
  "username": "test",
  "groups": "Admin",
   "office": [
    {
      "officeid": "2",
      "officename": "moon"
    },
    {
      "officeid": "3",
      "officename": "stars"
    }
  ]
  },
  {
  "id": "2",
  "username": "john",
  "groups": "guest",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    }
  ]
  }
]

Assuming that you have correctly retrieved the json structure through a service of some sort.

Assuming allUserData represents a single user at a given time. (If not, you need to use *ngFor)

"office" is an array and it could have more than one office object with two attributes "officeid","officename" respectively.

Lets say you want to access officename of the 1st office object of a given user, you should do it like "allUserData.office[0].officename"

To check how many offices are there for a given user "allUserData.office.length" --> You could use this to check the "no data" condition (allUserData.office.length > 0)

answered Apr 4, 2017 at 4:34

Nugu

8587 silver badges10 bronze badges

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

3 Comments

user3431310 Over a year ago

hi nugu, ur answer is helpful. I forgot to mention that, my allUserData is not an array (json will give bunch of data here, so I will search by specific Id, so let say i choose user id= 1, so my allUserData will only contain that user data. and how should i display that office data only, coz this user have 2 office data, if i choose another user id, they will have 1 office data. so quite confusing here how to check the condition. wait i will update my question)

user3431310 Over a year ago

oh it is ok. it is workin. no update.. hehe thank you nugu

Nugu Over a year ago

Glad it helped, i didn't want to post a full fledged answer because there should be a learning curve ;)

Jpsh · Accepted Answer · 2017-04-04 04:49:54Z

first off the json you put in the original question was malformed, below I believe I corrected it.

when using Angular you have to define a module and a controller once you've done that you can user ng- directives in combination with handlebars {{ }}. more specifically to answer you're question to loop through an array you would use ng-repeat so for example if your array was users you could do something like ng-repeat="user in users" and then in elements below that you could use handle bars to call a property of the current user e.g. {{user.username}}. See my full example below

data = [{"id": "1",
  "username": "test",
  "groups": "Admin",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    },
    {
      "officeid": "3",
      "officename": "stars"
    }
  ]
},
{"id": "2",
  "username": "john",
  "groups": "guest",
  "office": [
    {
      "officeid": "2",
      "officename": "moon"
    }
  ]
}];

var myapp = angular.module('myApp',[]);
myapp.controller('myCtrl', function($scope){
	$scope.users = data;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <div class="form-group row" ng-repeat="user in users">
    <lable class="col-md-2 control-label" for="text-input">username</lable>
    <input type="text" name="username-{{user.id}}" value="{{user.username}}" /><br/>
    <label class="col-md-2 control-label" for="text-input">user group</label>
    <input type="text" name="usergroup-{{user.id}}" value="{{user.groups}}" /><br/>
    <div class="col-md-4" ng-repeat="office in user.office">
      <label class="form-control underline">officename-{{office.officeid}}</label>
      <input type="text" name="officename-{{office.officeid}}" value="{{office.officename}}" /><br/>
    </div>
  <hr/><!--just for no css example to split users-->
  </div>
  
</div>

Collectives™ on Stack Overflow

How to Display data of an array within an object in angular 2 or higher

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related