What is the correct way to have JSON.Stringify properly parse a variable?

Question

What is the correct way to have JSON.Stringify properly parse a variable?

I'm struggling with this issue 😞. My Client is performing an ajax httppost and I need to send the following data:

  private doSaveQuery(queryName: string): void {

    const info = {};
    info['userName'] = 'admin';
    info['userQueryName'] = queryName;
    ...

But when it gets stringified, it turns into this:

{"userName":"admin",
 "userQueryName":{"queryName":"MyName"}
}

Why does it take my variable name "queryName" and add it as a key to my value?

How can I achieve this format instead?

{"userName":"admin",
  "userQueryName":"MyName"
}

I believe this is a simple fix, so I appreciate your patience with my ignorance 😅.

Thanks in advance!

javascript json typescript

Answer 1

Answer №1

While encoding the object, it appears that the variable queryName is not a simple string, but rather an object that looks like {queryName: 'MyName'}.

To correct this issue, ensure that queryName is just the string MyName.

info['userQueryName'] = 'MyName'

In other words, queryName may not be the straightforward string you initially thought it was.

Here is an example of your current implementation:

const queryName = {queryName: "MyName"}
const info = {
  userName: "admin",
  userQueryName: queryName
}
console.log(JSON.stringify(info))

To rectify this, update queryName to a simple string:

const queryName = "MyName"
const info = {
  userName: "admin",
  userQueryName: queryName
}
console.log(JSON.stringify(info))

If this is not feasible, an alternative approach is to construct info using the property:

const queryName = {queryName: "MyName"}
const info = {
  userName: "admin",
  userQueryName: queryName.queryName
}
console.log(JSON.stringify(info))

Answer 2

While encoding the object, it appears that the variable queryName is not a simple string, but rather an object that looks like {queryName: 'MyName'}.

To correct this issue, ensure that queryName is just the string MyName.

info['userQueryName'] = 'MyName'

In other words, queryName may not be the straightforward string you initially thought it was.

Here is an example of your current implementation:

const queryName = {queryName: "MyName"}
const info = {
  userName: "admin",
  userQueryName: queryName
}
console.log(JSON.stringify(info))

To rectify this, update queryName to a simple string:

const queryName = "MyName"
const info = {
  userName: "admin",
  userQueryName: queryName
}
console.log(JSON.stringify(info))

If this is not feasible, an alternative approach is to construct info using the property:

const queryName = {queryName: "MyName"}
const info = {
  userName: "admin",
  userQueryName: queryName.queryName
}
console.log(JSON.stringify(info))

Answer 3

Answer №2

When you specify a type as a string in TypeScript, it should typically catch any errors where you're not passing a string. However, sometimes things don't go as expected.

function getMyJSON(queryName) {
   const info = {};
    info['userName'] = 'admin';
    info['userQueryName'] = queryName;
  return info;
}

const a = {queryName:"name"};

console.log(JSON.stringify(getMyJSON(a)));

Answer 4

When you specify a type as a string in TypeScript, it should typically catch any errors where you're not passing a string. However, sometimes things don't go as expected.

function getMyJSON(queryName) {
   const info = {};
    info['userName'] = 'admin';
    info['userQueryName'] = queryName;
  return info;
}

const a = {queryName:"name"};

console.log(JSON.stringify(getMyJSON(a)));

What is the correct way to have JSON.Stringify properly parse a variable?

Answer №1

Answer №2

Similar questions

Angular service providing components (TypeScript error)

What are the steps to create an endless scrolling feature?

What are the steps to start a project on a personal computer?

Troubleshooting Next.js and Tailwind CSS Breakpoints: What's causing the

The Vue.js v-on:mouseover function is not functioning properly in displaying the menu

Leveraging route configuration's scope in HTML

Is there a way to restrict the amount of user input that is allowed?

Tips for sending JSON objects to web services using URLs

The issue persists where Chrome WebAPI's chrome.webRequest.onBeforeSendHeaders is failing to modify the parameters in the outbound requests

Interactive Communication: PHP and JQuery Messaging Platform

Creating a Custom Class for a Custom Button in TinyMCE 4 Using addButton()

Node.js: Steps for receiving an ArrayBuffer in a $http request

Encountering a RangeError when transmitting OpenLayers3 event via AJAX

When the child state changes the parent state, useEffect may not be triggered for the first time

Attempting to use vue-test-utils-getting-started with the standard configuration results in a "Preset Not Found" error during

A step-by-step guide on incorporating Google Ads Manager Ads units (Banners) into your website with NuxtJs and VueJs

Creating a custom pipe that converts seconds to hours and minutes retrieved from an API can be achieved by implementing a transformation function

Exploring date comparisons in TypeScript and Angular 4

Angular 11 is throwing an error stating that the type 'Observable<Object>' is lacking certain properties as required by its type definition

Modify the image inside a div when hovering