Changing mapping in Spring Boot and Angular

Issue

I'm trying to change mapping in both the back end and front end (Spring Boot and Angular) but without any changes to the database and without changing the variables. I've found a solution for a Spring Boot part, just by adding @JsonProperty. I don't know what to do on the Angular side, though. Is there a somewhat similar solution for that part, too? And where to put it?

Here's a snippet of my code in Spring Boot, I hope that's enough to get the idea of what I'm trying to do. If necessary, I'll add more.

@JsonProperty("document_name")
@Column(name = "name", nullable = false, length = 255)
private String name;

@JsonProperty("document_description")
@Column(name = "description", nullable = false, length = 255)
private String description;

Using @JsonProperty enables me to change the variable names without actually making any changes in code. As I said, I need to do the same thing with Angular. Any suggestions?

EDIT: Here's my Angular code. I have hardcoded the file to work properly, and I know that's not a proper solution. I guess I need to put the @JsonProperty annotation somewhere here, but I'm obviously making some mistake I'm not aware of.

import {HttpErrorResponse} from '@angular/common/http';
import {Component, DoCheck, OnInit} from '@angular/core';
import {Document} from './docu';
import {DocumentService} from './document.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit, DoCheck {
  public documentList: Document[];
  public add = false;
  public newDocument: any;
  public documentNameOld : any;
  public documentDescriptionOld : any;

  constructor(private documentService: DocumentService) {
    this.documentList = [];
  }

  ngOnInit() {
    this.getDocuments();
  }

  ngDoCheck() {
  }

  public getDocuments(): void {
    this.documentService.getAllDocuments().subscribe(
      (response: any) => {
        (<Document[]>response).forEach(docu => {
          const doc: Document = {
            id: docu.id,
            document_name: docu.document_name,
            document_description: docu.document_description,
            editable: false,
          };
          this.documentList.push(doc);
        });
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
  }

  addRow(): void {
    this.add = true;
    const id = Math.floor(Math.random() * 100)
    this.newDocument = {
      id: id,
      document_name: '',
      document_description: '',
      editable: false
    };
  }

  public addDocument(): void {
    if (this.newDocument.document_name === '') {
      alert('Please add name!');
      return;
    }
    if (this.newDocument.document_description === '') {
      alert('Description not added!');
      return;
    }

    this.documentService.createDocument(this.newDocument).subscribe(
      response => {
        console.log(response);
        this.documentList = [...this.documentList, response];
      },
      error => {
        console.log(error);
      }, () => {
        this.add = false;
      });
  }

  cancelAddingDocument(): void {
    this.add = false;
  }

  updateRow(document: Document): void {
    console.log(document);
    this.documentNameOld= document.document_name;
    this.documentDescriptionOld = document.document_description;
    document.editable = true;
  }

  updateDocument(document: Document): void {
    if(document.document_name === ''){
      alert("Please enter name!")
      return;
    }
    if(document.document_description === '') {
      alert("Please enter description!")
    return;
    }
    this.documentService.updateDocument(document).subscribe(
      response => {
        console.log(response)
      },
      error => {
        console.log(error)
      },
      () => {
        document.editable = false;
      }
    )
  }

  cancelUpdate(document: Document): void {
    document.document_name = this.documentNameOld;
    document.document_description = this.documentDescriptionOld;
    this.documentNameOld = '';
    this.documentDescriptionOld = '';
      document.editable = false;
  }

  deleteDocument(document: Document): void {
    this.documentService.deleteDocumentById(document.id).subscribe(
      response => {
        console.log(response)
      },
      error => {
        console.log(error)
      },
      () => {
        document.editable = false;
        const index = this.documentList.indexOf(document);
        this.documentList.splice(index, 1);
      }
    )
  }
}

Solution

@JsonProperty("document_name") This Annotation can be used in your typescript class as well.

I am assuming your Document class to be something like :

class Document {
    @JsonProperty("document_name")
    documentName: string; 
.....
.....
}

So you can use it like that. Please refer this link as well : https://cloudmark.github.io/Json-Mapping/

Answered By - Adya