How to ignore quotes from JSON response?

Question

I am using JSONstringify to get the user location in my react-native app but it comes with quotes too so in this <Text>City: {this.state.city}</Text> it returns City: "London" Any idea how to remove the quotes?

Thanks

Answer 1

There are two questions to answer here: How to remove those quotes around the values you get, which is actually your question, and why are you getting them, as you might just need to fix something else to get the values right.

️ How to remove quotes around a string value:

There are many ways you can remove the quotes around a string value, or actually, any first and last character, whatever those are:

• String.prototype.slice()
• String.prototype.substring()
• String.prototype.substr()
• String.prototype.replace()

You might want to take a look at What is the difference between String.slice and String.substring?

const city = '"London"';
const size = city.length;

// Most intuitive in my opinion:
console.log(city.slice(1, -1));

// Also ok:
console.log(city.substring(1, size - 1));

// Not so intuitive:
console.log(city.substr(1, size - 2));

// This will also match quotes that are not in the first or last position of the string:
console.log(city.replace(/"/g, ''));

.as-console-wrapper {
  max-height: 100vh !important;
}

Why might you be getting thoose extra quotes?

When using JSON.stringify and JSON.parse, you would normally do something like this:

// On the server you would send something like this:

const responseSent = JSON.stringify({ data: { location: 'London' } });

console.log('JSON SENT =', responseSent);

// Then, on the client you would parse that:

try {
  const responseReceived = JSON.parse(responseSent);
  
  console.log('PARSED JSON =', responseReceived);
  console.log('PARSED VALUE =', responseReceived.data.location);
} catch (e) {
  // ...
}

.as-console-wrapper {
  max-height: 100vh !important;
}

So you don't actually use JSON.stringify to get the value, but to send it. If you are doing something like this, then that's why you are getting those extra quotes:

// On the server you might be sending something like this:

const responseSent1 = JSON.stringify({ data: { location: 'London' } });
const responseSent2 = JSON.stringify({ data: { location: JSON.stringify('London') } });

console.log('JSON SENT 1 =', responseSent1);
console.log('JSON SENT 2 =', responseSent2);

// Then, on the client you would parse that:

try {
  const responseReceived1 = JSON.parse(responseSent1);
  const responseReceived2 = JSON.parse(responseSent2);
  
  console.log('PARSED JSON 1 =', responseReceived1);
  console.log('PARSED JSON 2 =', responseReceived2);
  
  console.log('PARSED VALUE 1 =', JSON.stringify(responseReceived1.data.location));
  console.log('PARSED VALUE 2 =', responseReceived2.data.location);
} catch (e) {
  // ...
}

.as-console-wrapper {
  max-height: 100vh !important;
}

Also, note that you strigify once the object that you are going to send, not the individual values and then the object as a whole again.

Answer 2

Easiest way to remove quotes at first and last position:

const input1 = '"Some text"';
const input2 = '"Some "quoted" text"';

const removeQuotes = string => string.replace(/"(.+)"/g, "$1")

console.log(removeQuotes(input1)); // Some text
console.log(removeQuotes(input2)); // Some "quoted" text

In your case you would call the removeQuotes function like this

<Text>City: {removeQuotes(this.state.city)}</Text>

Answer 3

If you're using JSON.stringify() to create this.state.city then you should use JSON.parse() to undo it.

<Text>City: {JSON.parse(this.state.city)}</Text>

But you probably shouldn't be using JSON.stringify() in the first place. That should only be used to serialize the entire object, not on the the individual properties. When you parse the object, the properties will contain valid data.