How to pass json data to Class variable in Angular?

Question

I have a class Projects

export class Projects {
project_id: number;
project_name: string;
category_id: number;
project_type: string;
start_date: Date;
completion_date: Date;
working_status: string;
project_info: string;
area: string;
address: string;
city: string;}

Its Service class is

@Injectable()
export class ProjectsService {

  constructor(private http: HttpClient) {}

  //http://localhost:9090/projectInfo
private apiUrl = 'http://localhost:9090/projectInfo';

public findAll() {
  return this.http.get(this.apiUrl);
 }

 getProducts(): Observable<ProjectsModule[]> {
  return this.http.get<ProjectsModule[]>(this.apiUrl);
}

Component is

import { Component, OnInit } from '@angular/core';
import { ProjectsService } from '../projects.service';
import{Projects} from '../projects';
import { plainToClass, Transform, Expose, Type, Exclude } from 'class-transformer';
@Component({
  selector: 'app-project-list',
  templateUrl: './project-list.component.html',
  styleUrls: ['./project-list.component.css'],
  providers: [ProjectsService]
})
export class ProjectListComponent implements OnInit {

private projects:Projects[]=[];
stringObject: any;
  constructor(
   private projectsService: ProjectsService) { }
   vandana='rahul';
   
  ngOnInit() {
   this.getAllProjects();
   }


 getAllProjects() {
   this.projectsService.getProducts().subscribe((data: Projects[])=> {
      this.stringObject =JSON.stringify(data)
      let newTodo = Object.assign(new Projects(), data); 
      this.projects=  <Projects[]>this.stringObject;
      console.log("data  -"+ this.projects)
      console.log("Array  -"+ this.stringObject)
      console.log("data  -"+ this.projects[1].project_info)
      },
      
   err => {
   console.log(err);
   } 
   
  );
 
   }

When i am trying to read newTodo.project_id (or any property of class Projects) it is undefined but newtodo is returning jsondata

output is

Please help me in getting values newtodo.project_id, newtodo.project_name and so on

trying to parse data to Projects class somehow and trying every possible way — VJain
– VJain, Commented Dec 24, 2020 at 10:17

Robby Cornelissen · Accepted Answer · 2020-12-24 10:25:28Z

1

You're assigning a JSON string to this.projects.

The JSON string is [{"projectId": 1, ... }].

So:

this.projects[1] evaluates to { (i.e. the second character in the string)
"{".project_id evaluates to undefined

You should assign the data itself to this.projects:

this.projects = data;

And then keep in mind that arrays in JavaScript are zero-based. Since you only have one object in your array, you'd have to print the projectId as follows:

console.log(this.projects[0].projectId);

Also, the properties of your Projects class don't match your JSON at all. Furthermore, Projects should probably be named Project, and should be an interface instead of a class.

edited Dec 24, 2020 at 10:25

answered Dec 24, 2020 at 10:20

Robby Cornelissen

98.5k23 gold badges154 silver badges180 bronze badges

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

4 Comments

VJain Over a year ago

has done changes .. it is giving value .. undefined

VJain Over a year ago

has done changes .. it is giving value .. undefined

Robby Cornelissen Over a year ago

Your class definition (which should be an interface) does not match your JSON. At all.

VJain Over a year ago

to read it in html file can i use <tr *ngFor="let project of projects "></tr> <td> Value is {{project.projectId}}</td>

Collectives™ on Stack Overflow

How to pass json data to Class variable in Angular?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related