Add support for nested JSON rendering (when JSON contains a string with another encoded JSON)

[MurzNN]

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