Nested Array Object list in table

Nested Array Object list in table

Posted by: arian on 12 April 2023, 1:45 am EST

• 

  arian

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 12 April 2023, 1:45 am EST - Updated 12 April 2023, 1:54 am EST

  This is my example object and i want to create a table with these columns
  
  HomeTown | Members | Power | SubPowers
  
  {homeTown}| {name} | {name} | {name}
  
  How can I display these nested arrays in table like this (I could not find any information in documentation)

  For each column I want to use DrillDown so it will show the next column data (this part I know how to do by grouping)

  I am using ActiveReportsJs v4 for React

  [{
    "squadName": "Super hero squad",
    "homeTown": "Metro City",
    "formed": 2016,
    "secretBase": "Super tower",
    "active": true,
    "members": [
      {
        "name": "Molecule Man",
        "age": 29,
        "secretIdentity": "Dan Jukes",
        "powers": [
          {
            "name": "Radiation resistance",
            "description": "Can resist harmful radiation",
            "subPowers": [
              {
                "name": "Immune to gamma radiation"
              },
              {
                "name": "Resistant to x-rays"
              },
              {
                "name": "Absorbs cosmic rays for energy"
              }
            ]
          },
          {
            "name": "Turning tiny",
            "description": "Can shrink to a tiny size",
            "subPowers": [
              {
                "name": "Increased agility"
              },
              {
                "name": "Hard to detect"
              },
              {
                "name": "Can enter small spaces"
              }
            ]
          },
          {
            "name": "Radiation blast",
            "description": "Can emit blasts of radiation",
            "subPowers": [
              {
                "name": "Can cause cancer in opponents"
              },
              {
                "name": "Disrupts electronics"
              },
              {
                "name": "Can create EMPs"
              }
            ]
          }
        ],
        "equipment": [
          {
            "name": "Molecular Gauntlets",
            "description": "Allows control of molecular structure"
          },
          {
            "name": "Molecular Belt",
            "description": "Enhances molecular manipulation abilities"
          }
        ]
      },
      {
        "name": "Madame Uppercut",
        "age": 39,
        "secretIdentity": "Jane Wilson",
        "powers": [
          {
            "name": "Million tonne punch",
            "description": "Can punch with incredible force",
            "subPowers": [
              {
                "name": "Can shatter steel"
              },
              {
                "name": "Sends shockwaves through the ground"
              },
              {
                "name": "Can create sonic booms"
              }
            ]
          },
          {
            "name": "Damage resistance",
            "description": "Can withstand incredible amounts of damage",
            "subPowers": [
              {
                "name": "Regenerates quickly"
              },
              {
                "name": "Can absorb energy attacks"
              },
              {
                "name": "Hard to hurt"
              }
            ]
          },
          {
            "name": "Superhuman reflexes",
            "description": "Can react incredibly quickly",
            "subPowers": [
              {
                "name": "Can dodge bullets"
              },
              {
                "name": "Can catch objects thrown at high speeds"
              },
              {
                "name": "Can anticipate opponents' moves"
              }
            ]
          }
        ],
        "equipment": [
          {
            "name": "Uppercut Gloves",
            "description": "Enhances punching power"
          },
          {
            "name": "Uppercut Boots",
            "description": "Enhances kicking power"
          }
        ]
      }
    ]
  }]

• 

  joel.parks

  • Post Options:
  • Link
    Copy

  Posted 13 April 2023, 3:25 am EST

  Hello,

  By default, a table must be tied to a single data set; this prevents tying nested data to columns within the table.

  You can get around this by using the same method as seen in this documentation: https://www.grapecity.com/activereportsjs/docs/ReportAuthorGuide/QuickStart/get-started-with-/Master-Detail-Report-With-Nested-DataRegions-Datasets

  This shows how you can create a details region below the current row displaying the nested data. We can do the same, except instead of dragging our “List” control into the row cell below, we can do this to the column cell adjacent. After that, we drag a table control into our new list control and tie this to our first nested data set, the “Members” data set. Then we just continue this down for each nested data set, creating a new list and table inside of each adjacent column.

  I’ve attached a sample report using the data that you provided showing how you can format these sub-table lists to get the layout that you desire.

  Joel

  NestedLists.zip