The process of linking a Json response to a table

Question

The process of linking a Json response to a table

In my products.components.ts class, I am retrieving Json data into the variable this.Getdata.

ngOnInit() {
this._service.getProducts(this.baseUrl)
.subscribe(data => {
  this.Getdata=data
  this.products=data
  alert(JSON.stringify(this.Getdata));      
});

I want to bind this Json data in the products.components.html class within a Table.

<p>
Product List
</p>
<table>
<th>Id</th> <th>Name</th> <th> Country</th> <th>Actions</th>
<tr *ngFor="let lst of products; let i = index" border="1">
  <td>{{i+1}}</td><td>{{lst.id}}</td><td>{{lst.employee_name}}</td> <td>Edit</td>
</tr>
</table>

The code above is not functioning correctly. Only the alert is being displayed. How can I successfully bind the data to the table?

This is the Json data I am working with:

[{"id":"1","employee_name":"amit","employee_salary":"0","employee_age":"0","profile_image":""},{"id":"247793","employee_name":"Ana","employee_salary":"123","employee_age":"123","profile_image":""},{"id":"247856","employee_name":"Joseph Beltran","employee_salary":"1000","employee_age":"23","profile_image":""},{"id":"247982","employee_name":"testyeyyeye1","employee_salary":"123","employee_age":"23","profile_image":""},{"id":"248007","employee_name":"test100","employee_salary":"123","employee_age":"23","profile_image":""},{"id":"248038","employee_name":"Hendry","employee_salary":"61888","employee_age":"26","profile_image":""}]

Model Class:

export class Productlist {
id: string;
employee_name: string;
employee_salary: string;
employee_age: string;
profile_image: string;
}

json angular typescript

Answer 1

Answer №1

Opt for storing the Observable in a property instead of subscribing to it directly, and then use the async pipe in your template.

By following this approach, you can simplify your Component like so:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

import { EmployeeService } from './employee.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  employees$: Observable<Array<any>> = this.employeeService.getEmployees();
  constructor(private employeeService: EmployeeService) {}
}

Update your Template as shown below:

<p>
    Employee List
</p>
<table border="1">
    <thead>
        <th>Id</th>
        <th>Name</th>
        <th> Country</th>
        <th>Actions</th>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees$ | async; let i = index">
            <td>{{i+1}}</td>
            <td>{{employee.id}}</td>
            <td>{{employee.employee_name}}</td>
            <td>Edit</td>
        </tr>
    </tbody>
</table>

Explore this Live Demo Code for reference.

Note: Ensure to name your properties and methods appropriately according to the context; consistency matters when working with specific data entities like employees.

Answer 2

Opt for storing the Observable in a property instead of subscribing to it directly, and then use the async pipe in your template.

By following this approach, you can simplify your Component like so:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';

import { EmployeeService } from './employee.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  employees$: Observable<Array<any>> = this.employeeService.getEmployees();
  constructor(private employeeService: EmployeeService) {}
}

Update your Template as shown below:

<p>
    Employee List
</p>
<table border="1">
    <thead>
        <th>Id</th>
        <th>Name</th>
        <th> Country</th>
        <th>Actions</th>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees$ | async; let i = index">
            <td>{{i+1}}</td>
            <td>{{employee.id}}</td>
            <td>{{employee.employee_name}}</td>
            <td>Edit</td>
        </tr>
    </tbody>
</table>

Explore this Live Demo Code for reference.

Note: Ensure to name your properties and methods appropriately according to the context; consistency matters when working with specific data entities like employees.

Answer 3

Answer №2

Another option is to utilize the following code:

const newObj= JSON.parse(jsonValue);

The object will now be accessible in newObj, allowing you to easily iterate through it using ngFor.

Answer 4

Another option is to utilize the following code:

const newObj= JSON.parse(jsonValue);

The object will now be accessible in newObj, allowing you to easily iterate through it using ngFor.

Answer 5

Answer №3

This is how I figured it out

class ProductListService implements OnInit {
public fetchData;
products:ItemList[];

constructor(private productService: ProductService) {}

ngOnInit() {
this.productService.getItems(this.apiUrl)
.subscribe((info:any) => {
 this.products=info;
});
}
}

Answer 6

This is how I figured it out

class ProductListService implements OnInit {
public fetchData;
products:ItemList[];

constructor(private productService: ProductService) {}

ngOnInit() {
this.productService.getItems(this.apiUrl)
.subscribe((info:any) => {
 this.products=info;
});
}
}

The process of linking a Json response to a table

Answer №1

Answer №2

Answer №3

Similar questions

Customizing the entire application's style based on conditions in Angular 4

What is the process for incorporating a unique Mongo expression into a JSON object?

Displaying a TypeScript-enabled antd tree component in a React application does not show any information

A useful Javascript function to wrap a string in <mark> tags within an HTML document

Angular 8 fails to retain data upon page refresh

Navigating the waters of importing npm modules with typescript, gulp, and browserify is a skill

Node.js is having trouble locating the JSON file for Ajax requests

Issue with Discord.js (14.1) - Message Handling Unresponsive

How Angular services transmit information to components

Pandas throws an error when trying to convert JSON data to an Excel file

Numerous unspecified generic arguments

Angular 5 offers the ability to incorporate dynamic checkbox input into your application

Issue TS2769: No matching overload found for this call. The type 'string | null' cannot be assigned to type 'string | string[]'

Troubleshooting Paths with Angular's NgFor Directive

Incorporate JavaScript Library into StencilJs Using TypeScript

In JavaScript, when using the fetch function with JSON, it is possible to skip the

Encountering problems during JSON response deserialization

Guide to integrating Gandi.Net API with Node.js in server.js

Transform input string containing newline characters into separate paragraphs

Transform a group of objects in Typescript into a new object with a modified structure