Description
Feature
Pretty often I and I suppose many other programmers have nested JSON values when the main JSON file contains strings with another JSON, that is encoded using backslashes. And it is very hard to view the real data of such JSONs in VS Code!
For example, the contents of a GraphQL POST request looks like this:
"request": {
"method": "POST",
"uri": "https:\/\/api.example.com\/graphql",
"body": "{\"query\":\"\\nmutation CreateCartMutation($draft: CartDraft!) {\\n createCart(draft: $draft) {\\n id\\n cartState\\n version\\n customerId\\n totalLineItemQuantity\\n totalPrice {\\n centAmount\\n currencyCode\\n fractionDigits\\n }\\n billingAddress {\\n postalCode\\n streetName\\n email\\n streetNumber\\n city\\n region\\n state\\n phone\\n mobile\\n firstName\\n lastName\\n }\\n shippingAddress {\\n postalCode\\n streetName\\n email\\n streetNumber\\n city\\n region\\n state\\n phone\\n mobile\\n firstName\\n lastName\\n }\\n lineItems {\\n id\\n quantity\\n name(acceptLanguage: [\\\"en\\\"])\\n productSlug(acceptLanguage: [\\\"en\\\"])\\n productType {\\n id\\n key\\n name\\n }\\n variant {\\n id\\n sku\\n images {\\n url\\n label\\n }\\n attributesRaw(includeNames: [\\\"creationDate\\\",\\\"articleNumberManufacturer\\\",\\\"articleNumberMax\\\",\\\"matrixId\\\",\\\"baseId\\\",\\\"designer\\\",\\\"madeInItaly\\\",\\\"commonSize\\\",\\\"size\\\",\\\"color\\\",\\\"colorFreeDefinition\\\",\\\"style\\\",\\\"gender\\\",\\\"season\\\",\\\"isOnStock\\\",\\\"isLook\\\",\\\"seasonNew\\\",\\\"sapExternalId\\\",\\\"green\\\"]) {\\n name\\n value\\n }\\n price(currency: \\\"USD\\\" country: \\\"US\\\") {\\n value {\\n centAmount\\n currencyCode\\n fractionDigits\\n }\\n }\\n availability {\\n noChannel {\\n availableQuantity\\n }\\n }\\n }\\n price {\\n value {\\n centAmount\\n currencyCode\\n fractionDigits\\n }\\n }\\n totalPrice {\\n centAmount\\n currencyCode\\n fractionDigits\\n }\\n }\\n }\\n}\",\"variables\":{\"draft\":{\"currency\":\"USD\",\"country\":\"US\"}}}"
}
And I just want to simply view the GraphQL request and its variables! But it's quite challenging to do this - I need to make many manual steps to extract the values in a readable way like this:
query:
mutation CreateCartMutation($draft: CartDraft!) {
createCart(draft: $draft) {
id
cartState
version
customerId
totalLineItemQuantity
totalPrice {
centAmount
currencyCode
fractionDigits
}
billingAddress {
postalCode
streetName
email
streetNumber
city
region
state
phone
mobile
firstName
lastName
}
shippingAddress {
postalCode
streetName
email
streetNumber
city
region
state
phone
mobile
firstName
lastName
}
lineItems {
id
quantity
name(acceptLanguage: ["en"])
productSlug(acceptLanguage: ["en"])
productType {
id
key
name
}
variant {
id
sku
images {
url
label
}
attributesRaw(includeNames: ["creationDate","articleNumberManufacturer","articleNumberMax","matrixId","baseId","designer","madeInItaly","commonSize","size","color","colorFreeDefinition","style","gender","season","isOnStock","isLook","seasonNew","sapExternalId","green"]) {
name
value
}
price(currency: "USD" country: "US") {
value {
centAmount
currencyCode
fractionDigits
}
}
availability {
noChannel {
availableQuantity
}
}
}
price {
value {
centAmount
currencyCode
fractionDigits
}
}
totalPrice {
centAmount
currencyCode
fractionDigits
}
}
}
}
variables:
{
"draft": {
"currency": "USD",
"country": "US"
}
}
And I came up with the idea that your extension can be extended by adding a "Parse JSON value" button in the block where it displays a string that contains a nested encoded JSON value.
What do you think about this? Is it hard to implement?
Alternative solutions or implementations
No response
Other context
No response