Can't get values of double-nested entries #149

New issue

Open

opened 2022-07-16 16:31:43 +00:00 by jordanlambrecht · 1 comment

jordanlambrecht commented

2022-07-16 16:31:43 +00:00

(Migrated from github.com)

I'm using gray-matter/frontMatter and remark-mdx to read values of an .mdx file in a nextJS project:

.mdx file:

details:
  - pronoun: she/her
  - favoriteThing: learning
  - leastFavoriteThing: winter
  - favoriteMovie: kiki's delivery service
  - hatedBird: crows
  - hobby: mountain biking
  - personalAesthetic: uncool millennial
  - signs:
      - sun: leo
      - rising: sagittarius
      - moon: capricorn

[slug].tsx:

  function Details() {
    return (
        <div>
          {details.map((s) => {
            return (
              <div>
                <h1>
                  {CamelCaseToSentence(Object.keys(s).toString())}
                </h1>
                {Object.keys(s).toString() === 'signs' ? (
                  <ul>
                    <li>☉ {frontMatter.details.signs}</li>
                    <li>↑ {frontMatter.details.signs.rising}</li>
                    <li>☽ {frontMatter.details.signs.moon}</li>
                  </ul>
                ) : (
                  <p>{Object.values(s).toString()}</p>
                )}
              </div>
            )
          })}
      </div>
    )
  }

The file can read everything except for the double nested values of Signs and throws an 'undefined' error. How do I map out the double-nested values? I've tried everything.

I'm using gray-matter/frontMatter and remark-mdx to read values of an .mdx file in a nextJS project: .mdx file: ``` details: - pronoun: she/her - favoriteThing: learning - leastFavoriteThing: winter - favoriteMovie: kiki's delivery service - hatedBird: crows - hobby: mountain biking - personalAesthetic: uncool millennial - signs: - sun: leo - rising: sagittarius - moon: capricorn ``` [slug].tsx: ``` function Details() { return ( <div> {details.map((s) => { return ( <div> <h1> {CamelCaseToSentence(Object.keys(s).toString())} </h1> {Object.keys(s).toString() === 'signs' ? ( <ul> <li>☉ {frontMatter.details.signs}</li> <li>↑ {frontMatter.details.signs.rising}</li> <li>☽ {frontMatter.details.signs.moon}</li> </ul> ) : ( <p>{Object.values(s).toString()}</p> )} </div> ) })} </div> ) } ``` The file can read everything except for the double nested values of Signs and throws an 'undefined' error. How do I map out the double-nested values? I've tried everything.

yukinosaru commented

2026-01-22 17:39:29 +00:00

(Migrated from github.com)

In case anyone is coming across this issue, I found it was a matter of removing the leading -.

E.g. this should work.

details:
  - pronoun: she/her
  - favoriteThing: learning
  - leastFavoriteThing: winter
  - favoriteMovie: kiki's delivery service
  - hatedBird: crows
  - hobby: mountain biking
  - personalAesthetic: uncool millennial
  - signs:
      sun: leo
      rising: sagittarius
      moon: capricorn

In case anyone is coming across this issue, I found it was a matter of removing the leading -. E.g. this should work. ``` details: - pronoun: she/her - favoriteThing: learning - leastFavoriteThing: winter - favoriteMovie: kiki's delivery service - hatedBird: crows - hobby: mountain biking - personalAesthetic: uncool millennial - signs: sun: leo rising: sagittarius moon: capricorn ```