Join our next Developer Virtual Meetup – Live Q&A, Project Showcase, Swag raffle, and more 🔥

Writing GROQ queries to flatten nested objects and transform object entries into an array

38 replies
Last updated: Oct 17, 2021
How do I write a GROQ query for using that attribute. The path is something like
root[":items"].child[":items"]
Oct 16, 2021, 7:56 AM
{
  "title": "Address",
  "lastModifiedDate": 1622813281583,
  "templateName": "spa-sso-template",
  "designPath": "/libs/settings/wcm/designs/default",
  "cssClassNames": "page basicpage",
  "PublishInstance": true,
  "language": "en",
  ":type": "pwa/components/page",
  ":items": {
    "root": {
      "columnClassNames": {
        "responsivegrid": "aem-GridColumn aem-GridColumn--default--12"
      },
      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
      "columnCount": 12,
      ":items": {
        "responsivegrid": {
          "columnClassNames": {
            "add_new_address": "aem-GridColumn aem-GridColumn--default--12",
            "analytics_page_data": "aem-GridColumn aem-GridColumn--default--12"
          },
          "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
          "columnCount": 12,
          ":items": {
            "add_new_address": {
              "pageName": "addresslist",
              "category": "Address",
              "addNewAddressLabel": "Add new",
              "editAddressPageUrl": "/addresses/address-details",
              "backBtnUrl": "/homepage",
              "recName": "address",
              "componentTitle": "Address",
              "widgetName": "Address",
              "widgetId": "Address",
              "componentPosition": 1,
              ":type": "pwa/components/pwa/my-account/add-new-address"
            },
            "analytics_page_data": {
              "pageTitle": "Address",
              "navTitle": "Address",
              "pageName": "addresslist",
              "category": "Address",
              "subSection1": "",
              ":type": "pwa/components/pwa/common/analytics-page-data"
            }
          },
          ":itemsOrder": ["add_new_address", "analytics_page_data"],
          ":type": "wcm/foundation/components/responsivegrid"
        }
      },
      ":itemsOrder": ["responsivegrid"],
      ":type": "wcm/foundation/components/responsivegrid"
    }
  },
  ":itemsOrder": ["root"],
  ":path": "/addresses/address",
  ":hierarchyType": "page"
}
Oct 16, 2021, 8:12 AM
root can have
:items
, which can further have
:items
nested
Oct 16, 2021, 8:13 AM
I want to pull out all the
:items
and flatten it out
Oct 16, 2021, 8:13 AM
Wondering if I can do it with GROQ
Oct 16, 2021, 8:14 AM
Understand! Yes, it seems like you can access the paths like you would in JS, so if you want to get to the
add_new_address
object, it’s:
[":items"].root[":items"].responsivegrid[":items"].add_new_address
Oct 16, 2021, 8:17 AM
I tried it on groq.dev and its returning null
Oct 16, 2021, 8:18 AM
What was the full GROQ query you tried?
Oct 16, 2021, 8:18 AM
ah its working now
Oct 16, 2021, 8:19 AM
forgot the * in front
Oct 16, 2021, 8:20 AM
also had to refresh the page
Oct 16, 2021, 8:20 AM
thanks
user Y
, you have unblocked me 🙂
Oct 16, 2021, 8:20 AM
Aha! Sounds like you got it working then 🙂
Oct 16, 2021, 8:20 AM
Also, let’s acknowledge that AEM doesn’t exactly make it easy for you 😄
Oct 16, 2021, 8:21 AM
BTW, I am going to propose Sanity as our CMS...making sure all our use cases work
Oct 16, 2021, 8:21 AM
will bug you more for sure 🙂
Oct 16, 2021, 8:21 AM
You’re always welcome to ask here or in help (or in any of the more specialized channels) 👍
Oct 16, 2021, 8:22 AM
thank you! excited about exploring this
Oct 16, 2021, 8:22 AM
is there a way to transform all entries of an object into an array.
Oct 16, 2021, 9:21 AM
{
  "add_new_address": {
    "pageName": "addresslist",
    "category": "Address",
    "addNewAddressLabel": "Add new",
    "editAddressPageUrl": "/addresses/address-details",
    "backBtnUrl": "/homepage",
    "recName": "address",
    "componentTitle": "Address",
    "widgetName": "Address",
    "widgetId": "Address",
    "componentPosition": 1,
    ":type": "pwa/components/pwa/my-account/add-new-address"
  },
  "analytics_page_data": {
    "pageTitle": "Address",
    "navTitle": "Address",
    "pageName": "addresslist",
    "category": "Address",
    "subSection1": "",
    ":type": "pwa/components/pwa/common/analytics-page-data"
  }
}
Oct 16, 2021, 9:21 AM
converting the above to [{}, {}] ?
Oct 16, 2021, 9:22 AM
not sure if we can project entries of an object as an array ?
Oct 16, 2021, 9:24 AM
as in, to this?
[{
    "pageName": "addresslist",
    "category": "Address",
    "addNewAddressLabel": "Add new",
    "editAddressPageUrl": "/addresses/address-details",
    "backBtnUrl": "/homepage",
    "recName": "address",
    "componentTitle": "Address",
    "widgetName": "Address",
    "widgetId": "Address",
    "componentPosition": 1,
    ":type": "pwa/components/pwa/my-account/add-new-address"
},
{
    "pageTitle": "Address",
    "navTitle": "Address",
    "pageName": "addresslist",
    "category": "Address",
    "subSection1": "",
    ":type": "pwa/components/pwa/common/analytics-page-data"
}]
?
Oct 16, 2021, 9:32 AM
yup...can we do it ?
Oct 16, 2021, 10:06 AM
btw, there is an array of property names in
:itemsOrder
Oct 16, 2021, 10:07 AM
but if we can project the
:items
directly to an array, we are golden
Oct 16, 2021, 10:08 AM
Hi Geoff, I was thinking of making this more automatic where the property names can be picked up from the
:items
object
Oct 16, 2021, 5:32 PM
I have to run a script that needs to do it automatically
Oct 16, 2021, 5:32 PM
The top-level
:items
? Or recursively?
Oct 16, 2021, 5:44 PM
recursively if possible
Oct 16, 2021, 5:46 PM
but we can just start with the root for now
Oct 16, 2021, 5:46 PM
take the
:items
and convert the values into an array of objects
Oct 16, 2021, 5:46 PM
Is this any help?

*{
  'result': [{...@[":items"].root[":items"].responsivegrid[":items"]}]
}
Oct 16, 2021, 5:46 PM
Or am I missing what you’re after?
Oct 16, 2021, 5:47 PM
This is the closest I could get: https://groq.dev/yvB2bHzUeilM41oJ0TauNs
I was hoping the
@
would do the trick...but not working
Oct 17, 2021, 7:50 AM
idea is to select all the property names from the ":itemsOrder" and use that to pick the item from the ":items" object
Oct 17, 2021, 7:50 AM
I was hoping this would work:
*[":items"].root[":itemsOrder"] | {"item": *[":items"].root[":items"][@]}
Oct 17, 2021, 8:48 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?