How to directly use json response into loaded html in angular 2

Question

I just started working on angular 2 and exploring various of its components. I am getting data response to show on html from server in JSON format. In angular 1.x we can directly hold json object in variable and use its directly on html with the use of '.' operator without defining all variables. My question is:

Can we hold json object receive from server through ajax in any variable in component?

If yes, Then how can we use it on HTML without defining each variable available on that json response?

I am trying to implement is similar like showing below.

{
  "data": {
    "usersDetails": [
      {
        "image": "../userimage.jpg",
        "projects": [
          {
            "project_id": "1",
            "name": "test_project",
            "status": "0"
          }
        ],
        "created_on": "1480935474",
        "name": "Test name",
        "id": "10",
        "username": "tester.user"
      }
    ]
  },
  "message": "OK",
  "status": 200
}

In component:

user = response.data.userDetails[0];

In HTML

<tr>
  <td>User name</td>
  <td>{{user.name}}</td>
</tr>
<tr>
  <td>User image</td>
  <td><img src="{{user.image}}"/></td>
</tr>
<tr>
  <td>User username</td>
  <td>{{user.username}}</td>
</tr>
<tr>
...
</tr>

Günter Zöchbauer · Accepted Answer · 2016-12-12 06:40:28Z

3

If you fetch data from the server it is an async call and

user.name throws an exception because Angular tries to bind before the data is available. You can use the safe-navigation operator ?. to prevent that exception

<tr>
  <td>User name</td>
  <td>{{user?.name}}</td>
</tr>
<tr>
  <td>User image</td>
  <td><img src="{{user?.image}}"/></td>
</tr>
<tr>
  <td>User username</td>
  <td>{{user?.username}}</td>
</tr>
<tr>
...
</tr>

answered Dec 12, 2016 at 6:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

3 Comments

Santab Over a year ago

Thanks, For answer. This thing works. Great!. Is it right way to achieve this or we can use another approach to get perfect results?

Günter Zöchbauer Over a year ago

You can also use <tr *ngIf="user">, then the whole <tr> won't be rendered until data is != null. It depends on what is more convenient for your use case. You can also use a resolver or guard to preventing navigating to a route (if applicable) until the async call is completed angular.io/docs/ts/latest/guide/router.html#!#resolve-guard

Santab Over a year ago

Great! Thank you for your time and answer.

Collectives™ on Stack Overflow

How to directly use json response into loaded html in angular 2

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related