Modify JSON from using single quotes to double quotes using JavaScript

Question

Modify JSON from using single quotes to double quotes using JavaScript

Received a JSON from the backend to the front end that uses single quotes throughout, causing issues with a Magento 2 widget. The JSON structure is as follows:

{ 'mood': 'happy', 'reason': 'why shouldn't I?'}

The task at hand is to convert all single quotes to double quotes without altering the apostrophes within. Using a regular expression seems to be the most efficient approach by targeting JSON-related single quotes for replacement.

Despite various attempts and solutions found on SO, none have been successful in the past hour and a half. The closest solution attempted was:

goodJson = brokenJson.replace(/(?<=[{,:] )'|'(?=[:,]| })/g, '"');

This regex pattern aims to replace single quotes preceded or followed by specific characters, but it falls short when the last quote next to a closing curly brace remains unaffected in the output.

If you can shed some light on why this method fails and suggest an improved approach to achieve the desired result, it would be greatly appreciated.

javascript json regex

Answer 1

Answer №1

While the character string you provided may not adhere to a JSON format, your attempt with regex was very close to producing the correct outcome:

const fixJson = incorrectJson => incorrectJson.replace(/(?<=[{,: ])'|'(?=[:, }])/g, '"');

console.log(fixJson("{ 'mood': 'happy', 'reason': 'why'd not' }")); // { "mood": "happy", "reason": "why'd not" }
console.log(fixJson("{'mood': 'happy', 'reason': 'why'd not'}")); // {"mood": "happy", "reason": "why'd not"}

Best of luck!

Answer 2

While the character string you provided may not adhere to a JSON format, your attempt with regex was very close to producing the correct outcome:

const fixJson = incorrectJson => incorrectJson.replace(/(?<=[{,: ])'|'(?=[:, }])/g, '"');

console.log(fixJson("{ 'mood': 'happy', 'reason': 'why'd not' }")); // { "mood": "happy", "reason": "why'd not" }
console.log(fixJson("{'mood': 'happy', 'reason': 'why'd not'}")); // {"mood": "happy", "reason": "why'd not"}

Best of luck!

Answer 3

Answer №2

It has been noted by others that this data is not in the correct JSON format, and it would be best to address this issue at the source. If you need to convert improperly formatted JSON to a more flexible version where all values are treated as strings, you can utilize the following function:

function fixBrokenJson(str) {
 return str.replace(/'(\w+)' *: *'(.*?)'(?=[,| *\}])/g, '"$1": "$2"');
}

[
  "{ 'name': 'John', 'age': '30'}",
  "{ 'name': 'Jane 'Doe'', 'age': '25'}",
  "{ 'name': 'Alice', 'age': '28',}",
].forEach(str => {
  console.log('original: ' + str + '\n fixed: ' + fixBrokenJson(str));
})

Output:

original: { 'name': 'John', 'age': '30'}
 fixed: { "name": "John", "age": "30"}
original: { 'name': 'Jane 'Doe'', 'age': '25'}
 fixed: { "name": "Jane 'Doe'", "age": "25"}
original: { 'name': 'Alice', 'age': '28',}
 fixed: { "name": "Alice", "age": "28",}

From the output above, it is evident that the third string is still problematic. Adding additional conditions can help mitigate this issue, but may introduce new challenges.

Understanding of the regex used:

'(\w+)' -- expects key with single quotes around it
*: * -- expects colon with optional spaces before and after
'(.*?)' -- expects value with single quotes around it, non-greedy approach
(?=[,| *\}]) -- positive lookahead for a comma or end of object

Answer 4

It has been noted by others that this data is not in the correct JSON format, and it would be best to address this issue at the source. If you need to convert improperly formatted JSON to a more flexible version where all values are treated as strings, you can utilize the following function:

function fixBrokenJson(str) {
 return str.replace(/'(\w+)' *: *'(.*?)'(?=[,| *\}])/g, '"$1": "$2"');
}

[
  "{ 'name': 'John', 'age': '30'}",
  "{ 'name': 'Jane 'Doe'', 'age': '25'}",
  "{ 'name': 'Alice', 'age': '28',}",
].forEach(str => {
  console.log('original: ' + str + '\n fixed: ' + fixBrokenJson(str));
})

Output:

original: { 'name': 'John', 'age': '30'}
 fixed: { "name": "John", "age": "30"}
original: { 'name': 'Jane 'Doe'', 'age': '25'}
 fixed: { "name": "Jane 'Doe'", "age": "25"}
original: { 'name': 'Alice', 'age': '28',}
 fixed: { "name": "Alice", "age": "28",}

From the output above, it is evident that the third string is still problematic. Adding additional conditions can help mitigate this issue, but may introduce new challenges.

Understanding of the regex used:

'(\w+)' -- expects key with single quotes around it
*: * -- expects colon with optional spaces before and after
'(.*?)' -- expects value with single quotes around it, non-greedy approach
(?=[,| *\}]) -- positive lookahead for a comma or end of object

Modify JSON from using single quotes to double quotes using JavaScript

Answer №1

Answer №2

Similar questions

Combining two JSON responses using AngularJS

The grid expands to cover the entire width of the browser

Unable to include a JavaScript file within another JavaScript file

Incorporate audio playback on image click using JavaScript, with the feature to automatically pause the playback if multiple images are playing simultaneously

Refreshing a div's content with a single click to update the page

Mastering the A-Frame Game Loop: Tips for Separating Logic and Rendering

When I try to move my object, it seems to have a mind of its own and flies off the canvas instead of staying where

Changing the size of an iframe and closing it by pressing the ESC

Identify all div elements with a specific class within the parent div

Maintain parental visibility with children when navigating to a different page

Guide on creating rsa key pair on the client side with angular2

Building a custom React carousel using visibility logic starting from the ground up

vee-validate remains consistent in its language settings

Whenever I add a new Task in React.js, the date is not visible to me

CSRF fails to execute during the initial post submission

Adjust the navigation text and logo color as you scroll on the page

Refreshingly modernizing SVG in Angular

Is it possible to create cloud functions for Firebase using both JavaScript and TypeScript?

Django views are not receiving multiselect data from Ajax requests

Include CakePHP named parameters in the URL when selecting from a list