嵌套的 JSON Stringify 将代码包装在 " 和 \ 中。JSON 解析生成 [对象对象]

Question

我正在使用Gatsby，我正在尝试使用数组的map来生成使用schema.org验证的嵌套JSON-LD。

代码是：

class TagRoute extends React.Component {
render() {
const posts = this.props.data.allMarkdownRemark.edges
const blogPostSchema = JSON.stringify(posts.map(post => (
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"name": `${post.node.frontmatter.title}`,
'headline': `${post.node.frontmatter.title}`,
"mainEntityOfPage": `https://example.com${post.node.fields.slug}`,
"alternativeHeadline": `${post.node.frontmatter.title}`,
"image": { 
"@type": "imageObject", 
"url": `https://example.com${
!!post.node.frontmatter.image.childImageSharp ? post.node.frontmatter.image.childImageSharp.fluid.src : post.node.frontmatter.image
}`,
"height": "640px",
"width": "1280px"
},
"author": "Author Name",
"genre": "SEO and Technical Marketing",
"wordcount": `${post.node.fields.readingTime.words}`,
"publisher": {
"@type": "Organization",
"name": "Author Name",
"logo": {
"@type": "imageObject",
"url": `https://example.com/img/author.jpg`,
"height": "200px",
"width": "200px"
},
"mainEntityOfPage": "https://example.com",
"sameAs": ["https://au.linkedin.com/in/social-account", "https://www.facebook.com/social-account/", "https://www.twitter.com/social-account/", "https://www.instagram.com/social-account/"],
"url": "https://example.com"
},
"url": `https://example.com${post.node.fields.slug}`,
"datePublished": `${ post.node.frontmatter.date }`,
"dateModified": `${ post.node.frontmatter.date }`,
"description": `${ post.node.frontmatter.description}`,
})))
const blogSchema = JSON.stringify(
{
"@context": "https://schema.org",
"@type": "Blog", 
"author": "Author Name",
"blogPosts": `${blogPostSchema}`,
}
)
... other stuff here

我以两个最终结果结束。

结果 A) 嵌套的 JSON。Stringify：输出被括在引号中，并在结果中添加- 这并不奇怪，因为它是嵌套JSON.Stringify()，会将其包装在字符串中。 要点结果 B)JSON 解析返回 [对象对象]：如果我使用JSON.parse()作为const或直接在 oneJSON.stringify()函数中编写this.props.data.allMarkdownRemark.edges.map(post => (...))，它会返回 [对象对象] 而不是JSON-LD代码的值。 要点

GraphQL 如下所示，但它完美地引用了对象。

export const tagPageQuery = graphql`
query TagPage($tag: String) {
site {
siteMetadata {
title
}
}
allMarkdownRemark(
limit: 1000
sort: { fields: [frontmatter___date], order: DESC }
filter: { frontmatter: { tags: { in: [$tag] } } }
) {
totalCount
edges {
node {
excerpt(pruneLength: 260)
id
html
fields {
slug
readingTime {
text
words
}
}
frontmatter {
title
description
image {
childImageSharp {
fluid(maxWidth: 2048, quality: 75) {
...GatsbyImageSharpFluid_withWebp
}
}
}
templateKey
date(formatString: "MMMM DD, YYYY")
}
}
}
}
}
`

这个JSON.stringfy()接近有效JSON+LD，数组开头和结尾的引号需要去掉，所有都需要删除。但是，我不想做字符串替换来清理它的有效代码，因为我首先实现数组的方式一定有问题。

Answer 1

也许你应该避免做两次JSON.stringify？由于blogPostSchema是一个有效的对象，你可以直接在blogSchema中引用它。

const blogPostSchema = posts.map(post => ({ // no JSON.stringify here
"@context": "https://schema.org",
"@type": "BlogPosting",
"name": post.node.frontmatter.title,
...
}))
const blogSchema = JSON.stringify({
"@context": "https://schema.org",
"@type": "Blog", 
"author": "Author Name",
"blogPosts": blogPostSchema,  //  <--- refer to blogPostSchema directly
})