To display the single row array data into multiple rows in Read-only grid.

Hello [mention:52de0ce478ae4a25be2fbff46609a4fb:e9ed411860ed4f2ba0265705b8793d05] 

below is something that will help you to understand how to achieve your requirement. Please replace with your values and fields accordingly to try out.

a!localVariables(
local!data:yourDataHere,
  local!formatData: a!flatten(
    a!forEach(
      items: local!data,
      expression: a!localVariables(
        local!rowData: fv!item,
        a!forEach(
          items: fv!item.itemId,
          expression: a!map(
            invoice: local!rowData.invoice,
            itemId: fv!item,
            billedQuantity: index(
              local!rowData.billedQuantity,
              wherecontains(fv!item, local!rowData.itemId),
              null
            )
          )
        )
      )
    )
  ),
  {
    a!gridField(
      label: "Original Data",
      data: local!data,
      columns: {
        a!gridColumn(label: "Invoice", value: fv!row.invoice),
        a!gridColumn(label: "Item Id", value: fv!row.itemId),
        a!gridColumn(
          label: "Billed Quantity",
          value: fv!row.billedQuantity
        )
      }
    ),
    a!gridField(
      label: "Formatted Data",
      data: local!formatData,
      columns: {
        a!gridColumn(label: "Invoice", value: fv!row.invoice),
        a!gridColumn(label: "Item Id", value: fv!row.itemId),
        a!gridColumn(
          label: "Billed Quantity",
          value: fv!row.billedQuantity
        )
      }
    )
  }
)

Also I would say, the way you are saving your data is not a preferable format. This would cause you troubles when displaying the data or while trying to update the data.

I would suggest iterate each item before you save and have a new row of data with same invoice number.

Data Source: Make sure your grid's data source is set to the list containing the invoice data. Each element in the list should have an "invoiceReference" property and an "orderItems" array property containing the order item details.

Looping Expression: Create a new expression rule and set the output data type to "List of Dictionary". Use a looping expression to iterate through the "orderItems" array within each element of the data source list. Here's an example expression:

forEach(invoice in data_source,
forOrder in invoice.orderItems, {
"invoiceReference": invoice.invoiceReference,
"orderItem": forOrder
}
)

This expression iterates through each invoice in the data source and each order item within that invoice. It then creates a new dictionary for each order item, containing the "invoiceReference" and the current "orderItem" value.

Grid Configuration: Set the grid's data source to the output of the looping expression rule. Define two columns in the grid:
Label: "Invoice Reference"
Value: currentRow.invoiceReference
Label: "Order Item"
Value: currentRow.orderItem

Better to user Bulleted List For View and Space Optimization Based on Unique Key.

a!localVariables(
  local!data: {
    a!map(
      invoice: 12345,
      itemId: { 1, 22, 31, 12 },
      billedQuantity: { 1, 2, 1, 1 }
    ),
    a!map(
      invoice: 67890,
      itemId: { 41, 51, 22 },
      billedQuantity: { 1, 2, 1 }
    )
  },
  local!formatData: a!flatten(
    a!forEach(
      items: local!data,
      expression: a!localVariables(
        local!rowData: fv!item,
        a!forEach(
          items: fv!item.itemId,
          expression: a!map(
            invoice: local!rowData.invoice,
            itemId: fv!item,
            billedQuantity: index(
              local!rowData.billedQuantity,
              wherecontains(fv!item, local!rowData.itemId),
              null
            )
          )
        )
      )
    )
  ),
  {
    a!gridField(
      label: "Original Data",
      data: local!data,
      columns: {
        a!gridColumn(label: "Invoice", value: fv!row.invoice),
        a!gridColumn(label: "Item Id", value: fv!row.itemId),
        a!gridColumn(
          label: "Billed Quantity",
          value: fv!row.billedQuantity
        )
      }
    ),
    a!gridField(
      label: "Formatted Data",
      data: local!formatData,
      columns: {
        a!gridColumn(label: "Invoice", value: fv!row.invoice),
        a!gridColumn(label: "Item Id", value: fv!row.itemId),
        a!gridColumn(
          label: "Billed Quantity",
          value: fv!row.billedQuantity
        )
      }
    )
  }
)

I'm curious what you're doing to get your database data passed back in this form.  Is this from a view or querying directly from a table (and re-querying for the mutliple entries)?

If it's from a view or similar, I would suggest that the BEST approach would probably be, come up with a different view that returns a unique row for each different invoice / item number pair (this seems to be the main delimiter in terms of what you're using here).  Trying to do this data transformation on the interface side might be possible, but it'll be rather complex and also hard to maintain.