Angular unable to print JSON data in HTML?

Question

i wanted to fetch data from the API and print the same data on the HTML page.

I have the code as below. I am able to fetch data from the API and console log the API data. But I am unable to print the same on HTML page.

there is no errors that are shown while compiling or while executing the code, i think the code is missing some thing . i couldn't see any mistake as of now, please help me out in solving this the component.ts, HTML, Service.ts are given below

component.ts

export class LoginComponent implements OnInit {

    username = '';
    password = '';
    a = '';
    data1 = [];

    constructor(private abc: LoginService, private router: Router) {}

    ngOnInit() {}

    login() {
        console.log(JSON.stringify({
            username: this.username,
            password: this.password
        }));
        this.a = JSON.stringify({
            username: this.username,
            password: this.password
        });
        this.abc.getValues(this.a).subscribe((data: any) => {
            this.data1 = data;
            console.log(data);
            console.log(this.data1);
        });
    }

}

component.html

<div class="wrapper fadeInDown">
    <div id="formContent">
        <!-- Tabs Titles -->
        <!-- Icon -->
        <div class="fadeIn first">
            <h1>Touchworld Technologies</h1>
        </div>
        <!-- Login Form -->
        <form #formData="ngForm">
            <input type="text" id="login" class="fadeIn second" placeholder="username" name="username"
                [(ngModel)]="username">
            <input type="text" id="password" class="fadeIn third" name="password" placeholder="password"
                [(ngModel)]="password">
            <input type="submit" class="fadeIn fourth" value="Log In" (click)="login()">
            <!-- <button class="fadeIn fourth" [routerLink]="['../secondpage']">Home</button> -->
        </form>
        {{data1}}
        <!-- Remind Passowrd -->
        <div id="formFooter">
            <a class="underlineHover" href="#">Go to the Site</a>
        </div>
    </div>
</div>

<ul>
    <li *ngFor="let datas of data1">
        <span>{{datas.id}}</span>
        <span>{{datas.title}}</span>
        <span>Test</span>
    </li>
</ul>

service.ts

export class LoginService {

    constructor(private http: HttpClient) {}

    getValues(a: any) {
        console.log("you have entered");
        console.log(a);
        return this.http.get('https://jsonplaceholder.typicode.com/posts');
    }

}

You can print JSON with JsonPipe. That being said, as the answers describe, you are trying to render a variable that may have not been declared or defined. — Alexander Staroselsky
– Alexander Staroselsky, Commented Jan 30, 2020 at 5:57

Dipten · Accepted Answer · 2020-01-30 06:13:29Z

1

You can print data1 on HTML side as below in component.html:

{{data1 | json}}

You can check ref here

answered Jan 30, 2020 at 6:13

Dipten

1,08211 silver badges19 bronze badges

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

2 Comments

Dipten Over a year ago

Please make sure you import CommonModule in app.module.ts

sanjay Over a year ago

imported CommonModule and i am able to console log the api data

Collectives™ on Stack Overflow

Angular unable to print JSON data in HTML?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related