Displaying simple JSON data from console to HTML in Angular

Question

I am using openhab for sensor monitoring. But I need to pull/inject the items(things),sensor properties, room configuration through web interface. So, openhab has REST queries which is well documented here - https://docs.openhab.org/configuration/restdocs.html.

I wanted to develop a simple web GUI. (I have no experience in web development before). So, I tried to follow a basic tutorial at angular.io and at - https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b.

As shown in the blog, I am able to retrieve a JSON object via Httpclient query till the console but I want to display it in the HTML but I am not finding a wa to do it. So, till now I have the following data at console:

But how to display in the HTML, like what changes do i have to make in app.component.html? If i just try -

, just the string data.login appears in HTML.

I tried searching websites and blogs but they described only ways of how to perform a query and getting till the console. But I needed it at the HTML.

My code: (All are beginner level - basic and default codes) app.component.ts

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'app';
  results = '';

  constructor(private http: HttpClient)
  {
  }


  ngOnInit(): void {
    this.http.get<UserResponse>('https://api.github.com/users/seeschweiler').subscribe(data => {
      console.log("User Login: " + data.login);
      console.log("Bio: " + data.bio);
      console.log("Company: " + data.company);
    });
  } 
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

interface UserResponse {
  login: string;
  bio: string;
  company: string;
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>



<h2>Here are some links to help you start: </h2>



<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

Thanks very much for the assistance.

@sundar Your HTML file doesn't contain {{data.login}} though? — user184994
– user184994, Commented May 19, 2018 at 16:48
So firstly you need to store data at the class level, not just the function level. In other words, this.data = data in your callback. Then, the interpolation should work fine — user184994
– user184994, Commented May 19, 2018 at 16:50

Shashank Vivek · Accepted Answer · 2018-05-19 16:58:32Z

2

Try this demo

 import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  title = 'app';
  results = {};

  constructor(private http: HttpClient)
  {
  }


  ngOnInit(): void {
    this.http.get('https://api.github.com/users/seeschweiler').subscribe(data => {
      this.results =  data;
    });
  } 
}

and in html:

{{results.login}}

You are not able to render {{data.login}} because its a local variable inside subscribe block.

edited May 19, 2018 at 16:58

answered May 19, 2018 at 16:52

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

Comments

baao · Accepted Answer · 2018-05-19 16:55:44Z

2

You can edit your html to something like this

<div style="text-align:center">
  <pre>
    {{ results | json }}
  </pre>
  <div style="color:red">
    {{ results.login }}
    <p>and so on</p>
  </div>
</div>

and the component's class needs to have a property holding the data. So take this as the class' code

export class AppComponent implements OnInit {

  private results: any;

  constructor(private http: HttpClient)
  {
  }


  ngOnInit(): void {
    this.http.get<any>('https://api.github.com/users/seeschweiler').subscribe(data => {
      this.results = data;
    });
  } 
}

Here's a demo

answered May 19, 2018 at 16:55

baao

73.5k18 gold badges152 silver badges209 bronze badges

Collectives™ on Stack Overflow

Displaying simple JSON data from console to HTML in Angular

{{data.login}}

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

{{data.login}}

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related