CODEWITHSUNDEEP
jsonangulartypescript
bengabo
bengabo

Reputation: 65

Angular and JSON

I'm implementing a simple system to import JSON elements in Angular. Everything works fine: I've used an interface, an observable and a directive. You can find the JSON here: http://jsonplaceholder.typicode.com/todos

Now, I want to use "completed", the boolean from JSON file, to display or not users when the page is loaded. There is a boolean "showUSer" and a method "displayUSer()" but I don't get it... I cannot correctly retrieve this JSON data. Any ideas ? :>

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

interface JSP {
  "userId": string;
  "id": string;
  "title": string;
  "completed": boolean
}

@Component({
  selector: 'app-product',
  template: `<div class="display" *ngFor="let todo of todos">
              <div>User Id: {{todo.userId}}</div>
              <div >id: {{todo.id}}</div>
              <div *ngIf="showUser">Title: {{todo.title}}</div>
            </div>`,
  styles: ['.display {margin-top: 20px; margin-bottom: 20px;}']
  })

export class ProductComponent implements OnInit {
  title: string = "Products List";
  todos: JSP[];
  showUSer: boolean;

  constructor(private http: HttpClient){
  }

  ngOnInit(){
    this.http.get<JSP[]>('http://jsonplaceholder.typicode.com/todos')
    .subscribe(result => this.todos = result);
 }

 displayUSer(): void {
   this.showUSer = this.todos.completed;
 }

}

Upvotes: 1

Views: 144

Answers (2)

Jason Goemaat
Jason Goemaat

Reputation: 29194

Nitpicks: Your question says to display or not users but your code seems to be display or not the title. Also why do you capitalize the 'S' in 'USers'?

The problem is this function which seems to ignore your actual data layout:

 displayUSer(): void {
   this.showUSer = this.todos.completed;
 }

todos is a property of your controller. This is an array from the api call you make and it doesn't contain a completed property, so this.todos.completed will always be false. I'm a little surprised that you don't get an error compiling your typescript.

It looks like you want this flag to be on a 'todo item' basis and not page-wide, so this.showUSer doesn't make sense. Also you don't seem to be calling displayUSer to set the value in any case.

Since you are looking at an individual todo item and the query is simple, why don't you just look at the flag?

<div *ngIf="todo.completed">Title: {{todo.title}}</div>

If you are wanting to set a page-wide flag based on some critieria, you can do that when you subscribe to the results. Here I'm assuming that you will set the showUSer flag if any of the todo items is marked as completed:

    this.http.get<JSP[]>('http://jsonplaceholder.typicode.com/todos')
    .subscribe(result => {
        this.todos = result;
        this.showUSers = result.reduce((previous, current) => previous || current.completed, false);
    });

Upvotes: 2

Obzi
Obzi

Reputation: 2390

Your JSON hasn't any json.completed value, but json[_].completed.

Upvotes: 1

Related Questions