What is the process for converting a template literal into JSON in Angular?

Question

What is the process for converting a template literal into JSON in Angular?

I am facing an issue with the code in my ty file:

onSubmit(form: NgForm){
console.log('Executed')
let data = `
  name: ${form.value.name},
  email: ${form.value.email},
  specialty: ${form.value.specialty},
  password:${form.value.password}

  `;
  this.http.post(`${ this.apiURL }/auth/register_lawyer`, data)
        .subscribe(
          result => {
            console.log(result)
          },
          error => {
            if(error.status == 400) {
              console.log(error);
            }
          }
        )
}

I am looking for a way to convert the received data from the form into JSON format. For example:

   data ={
"name":"Andrew",
"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e89c8d9b9c8da880879c85898184c68b8785">[email protected]</a>",
"specialty":"developer,
"password":"1234"

}

I need to send the data in JSON format via Post to my API, but I haven't found a solution yet. I attempted using JSON.stringify, however it did not work.

javascript angular typescript template-strings

Answer 1

Answer №1

Your dados string is not considered valid JSON due to non-compliance with formatting rules (e.g. missing double-quotes for keys, lack of string delimiters, etc). It's advisable to avoid using template strings when creating JSON data as it may require handling tasks like escaping strings.

To address this issue, refactor your code to first construct a DTO object, and then you can create the dados template string separately if needed. One approach to prevent redundancy is to utilize a function that constructs the string by iterating through the properties of the DTO.

const dto = {
    name     : form.value.name,
    email    : form.value.email,
    specialty: form.value.specialty,
    password : form.value.password
};

const url = `${ this.apiURL }/auth/register_lawyer`;
this.http.post( url, dto )    
    .subscribe( resultado => {
        console.log(resultado)
        },
        erro => {
            if(erro.status == 400) {
                console.log(erro);
            }
        }
    );

const dados = `
    name: ${dto.name},
    email: ${dto.email},
    specialty: ${dto.specialty},
    password:${dto.password}
`;

If there is a need to generate multiple similar non-JSON dados strings (possibly for logging purposes), you can utilize the following method:

function createTextThatIsNotJson( obj ) {

    let text = "";
    for( const key in obj ) {
        if( text.length > 0 ) text += ",\r\n";
        text += "    " + key + ": " + obj[key];
    }
    return text;
}

const dados = createTextThatIsNotJson( dto );

Answer 2

Your dados string is not considered valid JSON due to non-compliance with formatting rules (e.g. missing double-quotes for keys, lack of string delimiters, etc). It's advisable to avoid using template strings when creating JSON data as it may require handling tasks like escaping strings.

To address this issue, refactor your code to first construct a DTO object, and then you can create the dados template string separately if needed. One approach to prevent redundancy is to utilize a function that constructs the string by iterating through the properties of the DTO.

const dto = {
    name     : form.value.name,
    email    : form.value.email,
    specialty: form.value.specialty,
    password : form.value.password
};

const url = `${ this.apiURL }/auth/register_lawyer`;
this.http.post( url, dto )    
    .subscribe( resultado => {
        console.log(resultado)
        },
        erro => {
            if(erro.status == 400) {
                console.log(erro);
            }
        }
    );

const dados = `
    name: ${dto.name},
    email: ${dto.email},
    specialty: ${dto.specialty},
    password:${dto.password}
`;

If there is a need to generate multiple similar non-JSON dados strings (possibly for logging purposes), you can utilize the following method:

function createTextThatIsNotJson( obj ) {

    let text = "";
    for( const key in obj ) {
        if( text.length > 0 ) text += ",\r\n";
        text += "    " + key + ": " + obj[key];
    }
    return text;
}

const dados = createTextThatIsNotJson( dto );

What is the process for converting a template literal into JSON in Angular?

Answer №1

Similar questions

Show validation message using Bootstrap near the submit button

Techniques for removing a label value using JavaScript

"Leveraging the Angular2 core module for efficient sharing in lazy loading

What is the process of using 'DefaultImports' to import DTOs into TypeScript through ServiceStack?

React Link updates the browser's URL without refreshing the page, yet fails to display any new content

Upload an image converted to `toDataURL` to the server

Problem with the fixed header on a container causing a horizontal scroll bar

Is there a way to easily toggle a Material Checkbox in Angular with just one click?

Can a TypeScript function be structured to return never (or throw) if a generic type extends a subtype without requiring casting?

C# POST data retrieval does not provide the anticipated outcomes

Change the appearance of a bootstrap dropdown menu button when clicked on, whether it's the button itself or anywhere on the

The NextJS API is now pointing to the index.js file rather than the [id].js file

Using feature flags in Vue for enhanced functionality

Locating numerous words within a given string

The jQuery .animate function seems to be malfunctioning

Whenever I anticipate receiving an array, Fetch always delivers a promise

Ways to trigger child components function from parent component

What is the best way to retrieve the data-id from a button that has been appended?

The utilization of React Suspense results in the router props becoming null

display angular filter for mat radio option selected from mat-radio group