How to map nested list to UI element

Hi
i have a list of objects. and each object have list of objects (nested list)

how can i map the ui to show the nested list?

You are talking about the record in the database which has relation to another table ? ONE_TO_MANY ?

Whatever it was, the approach can be the same. You know the objectId of the target element and you able to show another page with the relations of that element.

no its generated on page inter. i need it to be on one page. mandatory
example

[
  {
    "ar": [
      {
        "e": "e",
        "f": "f"
      },
      {
        "e": "e",
        "f": "f"
      }
    ],
    "x": "x",
    "y": "y"
  },
  {
    "ar": [
      {
        "e": "e",
        "f": "f"
      },
      {
        "e": "e",
        "f": "f"
      }
    ],
    "x": "x",
    "y": "y"
  }
]

Hello @mohammad_altoiher,

Do I understand correctly that you want to represent your existing list on the UI?
If so, you can use the Dynamic List Behaviour for the Block component. Blocks also can be nested.
Please check this tutorial.

Regards,
Olha

That’s a simple list of objects
my case is a list of object IN another list of objects
as i have pointed in the previous replay

so master and detail in one dynamic list

That’s why I added that

Blocks also can be nested.

You can add a block with dynamic list behaviour for the detail objects inside the block with dynamic list behaviour for the master objects.

Regards,
Olha

ok so i add dynamic block inside a dynamic block.
but all the data are in one list in codeless
how do i map it?

Hello @mohammad_altoiher,
Here’s how the nested blocks should look like:

Hope this instruction will be useful:

  1. I’ve created an array similar to the array, you’ve provided, saved it to the PageData and called it myArray:

  1. Added a MyArrayBlock with Dynamic List Behaviour for that array (yellow one):

  1. Added a MajorBlock inside the MyArrayBlock (blue one). This block doesn’t have any additional logic and used only for grouping major array elements.
  2. Added Text components in the MajorBlock for x and y elements to represent x and y properties:

  1. Added the MinorArrayBlock with Dynamic List Behaviour for the ar property (green one):

  1. Added the MinorItemBlock (violet one). This block doesn’t have any additional logic and used only for grouping minor array elements.
  2. Added Text components in the MinorItemBlock for e and f elements to represent x and y properties:

The result is MajorBlock with 2 major objects (blue), that have MinorArrayBlock(green) with 2 minor elements (violet) for each major element.

Regards,
Olha

2 Likes

Thank you @olhadanylova
you should add this to youtube channel. im sure a lot of users will need it