Вложенный JSON Stringify переносит код в "и \. JSON Parse производит [объектный объект] - PullRequest
Новая
       11

Вложенный JSON Stringify переносит код в "и \. JSON Parse производит [объектный объект]

1 голос
/ 21 апреля 2019

Я использую Gatsby и пытаюсь использовать map массива для получения вложенного JSON-LD, который проверяется с помощью schema.org.

Код: 

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(), который будет заключать его в строку. 1020 * Gist * Результат B) JSON Parse возвращает [объект Object]: Если я использую JSON.parse() для const или напрямую пишу this.props.data.allMarkdownRemark.edges.map(post => (...)) в одной функции JSON.stringify(), он возвращает вместо [Object Object] значений кода 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, кавычки в начале и конце массива должны быть удалены и все \ должны быть удалены. Но я не хочу делать замены строк, чтобы очистить его для корректного кода, когда должно быть что-то не так с тем, как я реализую массив в первую очередь.

1 Ответ

0 голосов
/ 22 апреля 2019

Возможно, вам следует избегать делать 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
})
...