Skip to content

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

Open
@MurzNN

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions