GROQ query for nested :items attributes in path

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"]
AI Update

Based on the documentation I found, when working with nested arrays in GROQ queries where the path is something like root[":items"].child[":items"], you can use GROQ's array projection and dot notation to traverse this structure.

Basic Array Traversal

In GROQ, the [] operator projects over arrays. For nested arrays, you can chain them together:

*[_type == "yourType"]{
  root[]{
    child[]{
      // your fields here
    }
  }
}

This will iterate over all items in the root array, and for each of those, iterate over all items in the child array.

Accessing Specific Indices

If you need to access specific array elements, you can use bracket notation with indices:

*[_type == "yourType"].root[0].child[2]

According to the Sanity documentation on patches, which uses JSONMatch syntax (similar to GROQ), you can:

  • Use array[0] for the first element
  • Use array[-1] for the last element
  • Use array[2:] for slicing from index 2 onwards

Filtering Within Nested Arrays

You can also add filters at each level:

*[_type == "yourType"]{
  root[_type == "specificType"]{
    child[active == true]{
      fieldName
    }
  }
}

Flattening Nested Arrays

If you want to flatten the nested structure, you can use the [] operator multiple times:

*[_type == "yourType"].root[].child[]

This will give you a flat array of all child items from all root items.

The key difference between [] and [index] is:

  • [] - projects over all elements (iteration)
  • [index] - accesses a specific element by position
  • [condition] - filters elements based on a condition

For more complex queries, you can refer to the GROQ documentation and the query cheat sheet.

Show original thread
38 replies
{
  "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"
}
root can have
:items
, which can further have
:items
nested
I want to pull out all the
:items
and flatten it out
Wondering if I can do it with GROQ
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
I tried it on groq.dev and its returning null
What was the full GROQ query you tried?
ah its working now
forgot the * in front
also had to refresh the page
thanks
user Y
, you have unblocked me 🙂
Aha! Sounds like you got it working then 🙂
Also, let’s acknowledge that AEM doesn’t exactly make it easy for you 😄
BTW, I am going to propose Sanity as our CMS...making sure all our use cases work
will bug you more for sure 🙂
You’re always welcome to ask here or in help (or in any of the more specialized channels) 👍
thank you! excited about exploring this
is there a way to transform all entries of an object into an array.
{
  "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"
  }
}
converting the above to [{}, {}] ?
not sure if we can project entries of an object as an array ?
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"
}]
?
yup...can we do it ?
btw, there is an array of property names in
:itemsOrder
but if we can project the
:items
directly to an array, we are golden
Hi Geoff, I was thinking of making this more automatic where the property names can be picked up from the
:items
object
I have to run a script that needs to do it automatically
The top-level
:items
? Or recursively?
recursively if possible
but we can just start with the root for now
take the
:items
and convert the values into an array of objects
Is this any help?

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

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?