Why is vuemeta not parsing my string into json

26 Views Asked by At

My current project is a Gridsome framework using vue-meta to manage my metadata. For the most part, this is working just fine, however, I am having a hard time getting my JSON+LD to render.

All the data is being stored and served from a CMS. Inside that CMS I have a text field that I am putting my JSON into:

{
  "@context": "https://json-ld.org/contexts/person.jsonld",
  "@id": "http://dbpedia.org/resource/John_Lennon",
  "name": "John Lennon",
  "born": "1940-10-09",
  "spouse": "http://dbpedia.org/resource/Cynthia_Lennon"
}

Within my project, I have set my vue-meta as such:

metaInfo () {
    let tags = [];  
    if (this.$context?.fields?.slug?.length) {
        tags.push({
            name: 'canonical',
            content: `https://www.abcd.com${this.$context?.fields?.slug}`
        });
    }
    if (this.$context?.fields?.metadataFields?.title?.length) {
        tags.push({
            property: 'og:title',
            content: this.$context?.fields?.metadataFields?.title
        });
        tags.push({
            name: 'twitter:title',
            content: this.$context?.fields?.metadataFields?.title
        });
    }
    return {
        title: this.$context?.fields?.metadataFields?.title || 'Blue',
        titleTemplate: '%s | Or else',
        meta: tags,
        script: [
            {type: 'application/ld+json', 
            json: this.$context?.fields?.jsonLd?.content[0].content[0].value || {}
            }
        ]
    };

What is giving me issues is the last script tag in the return:

script: [
    {type: 'application/ld+json', 
    json: this.$context?.fields?.jsonLd?.content[0].content[0].value || {}
    }
]

In its current form, yes I expect it to render the JSON as a text, however, this was only so I could launch the project. If I change it by adding a JSON.parse() JSON.parse(this.$context?.fields?.jsonLd?.content[0].content[0].value), it will fail with the error: SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse (<anonymous>).

Thinking that it may have to do with vue-meta not liking the parse, I added a mounted function, and did the parsing there. On production, this too returned a string variable as my JSON+LD

        if (this.$context.fields.jsonLd){
            let dd = JSON.stringify(this.$context.fields.jsonLd.content[0].content[0].value);
            this.parsedLD = JSON.parse(dd);
        }
    }

If I start it locally using npm run dev I have no problems with the JSON.parse() it is only when it is served from the server that I am seem to have the issues.

0

There are 0 best solutions below