Display JSON value from component in Angular 5

Question

I am using Angular 5 and have an Angular service that returns a JSON object.

Here is the component that uses the service:

  export class PageComponent implements OnInit {

  public wikiContents : Object;

  constructor(private data:MyWikiService) { }

  ngOnInit() {
    this.data.GetPageContent('1234').subscribe((data) => {
      this.wikiContents = data;
      console.log(this.wikiContents);
  }, error => {
     console.log(error);
  });
  }}

This has the following JSON object in console.log()

{
    "body": {
        "view": {
            "value": "<p>apples</p><p>oranges</p>",
        }
    }
}

I would like to display the HTML in value key. How do I do that?

UPDATE:

From the answers below, one person suggested to use an interface for typescript. My interface for the entire JSON is like this. How can I map the component or Service to an Interface and then use it in the HTML File?

export interface WikiInt {
  id: string;
  type: string;
  status: string;
  title: string;
  body: Body;
  extensions: Extensions;
  _links: Links;
  _expandable: Expandable;
}
export interface Body {
  view: View;
  _expandable: Expandable1;
}
export interface View {
  value: string;
  representation: string;
  _expandable: Expandable2;
}
export interface Expandable2 {
  webresource: string;
  content: string;
}
export interface Expandable1 {
  editor: string;
  export_view: string;
  styled_view: string;
  storage: string;
  anonymous_export_view: string;
}
export interface Extensions {
  position: string;
}
export interface Links {
  webui: string;
  edit: string;
  tinyui: string;
  collection: string;
  base: string;
  context: string;
  self: string;
}
export interface Expandable {
  container: string;
  metadata: string;
  operations: string;
  children: string;
  restrictions: string;
  history: string;
  ancestors: string;
  version: string;
  descendants: string;
  space: string;
}

`
`. But that won't compile in prod mode because you declared wikiContents as Object, instead of defining a proper interface and use that interface as the type of wikiContents. TypeScript is about types. Define and use types. — JB Nizet, Nov 09 '18 at 00:10
Sorry, I am new to Angular. Will need to see where to declare that interface — Jake, Nov 09 '18 at 00:11

score 1 · Answer 1 · edited Nov 09 '18 at 05:51

1

Just use this in your HTML file

<p>{{wikiContents.body.view.value}}</p>

edited Nov 09 '18 at 05:51

Bryan

4,628
3
36
62

answered Nov 09 '18 at 04:50

chethu

386
1
3
26

if I were to use an interface, how would I map it? Please see the updated problem description above. – Jake Nov 09 '18 at 05:12
import interface name and its path just like components for ex. import {WikiInt} from "interface file path" – chethu Nov 09 '18 at 05:19

Prashant Pimpale · Accepted Answer · 2018-11-09T05:36:09.880

I would do something like this,

TS:

export class PageComponent implements OnInit {

 public wikiContents: any; // Instead of Object

 constructor(private data: MyWikiService) {}

 ngOnInit() {
  this.data.GetPageContent('1234').subscribe((data) => {
   if(data){
   this.wikiContents = data;
   console.log(this.wikiContents);
   }
  }, error => {
   console.log(error);
  });
 }
}

and in HTML:

<span *ngIf="response">
  <div [innerHTML]="response.body.view.value"></div>
</span>

No need to create an interface but you can read more about types here and use whatever that will satisfy your requirement.

You can refer this one which I found the useful about Types in Typescript.

Display JSON value from component in Angular 5

2 Answers2