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.

Answer 1

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)