Recursive functions to render data till nth level of nesting react

Question

0.00/5 (No votes)

See more:

<pre>const data = [
  {
    "laboaratory": [
      {
        "status": {
          display: "Code",
          value: "23123"
        },
        "observation": [
          {
            display: "Code",
            value: "23123"
          },
          {
            display: "Code",
            value: "23123"
          }
        ],
        "resultValue": {
          "quantity": [
            {
              display: "Code",
              value: "23123"
            },
            {
              display: "Code",
              value: "23123"
            }
          ],
          "codeableConcept": [
            {
              display: "Code",
              value: "23123"
            },
            {
              display: "Code",
              value: "23123"
            }
          ]
        }
      }
    ]
  },
  {
    "medications": [
      {
        "status": {
          display: "medications - Code",
          value: "23123"
        },
        "observation": [
          {
            display: "medications -Code",
            value: "23123"
          },
          {
            display: "medications- Code",
            value: "23123"
          }
        ],
        "resultValue": {
          "quantity": [
            {
              display: "medications- Code",
              value: "23123"
            },
            {
              display: "medications-Code",
              value: "23123"
            }
          ],
          "codeableConcept": [
            {
              display: "medications-Code",
              value: "23123"
            },
            {
              display: "medications- Code",
              value: "23123"
            }
          ]
        }
      }
    ]
  }
]

**Data Dipslay Format in UI** (HTML View with accordion header and table data and where we can open and close the accordion)

-> Laboratory(Main Heading) <h1> Laboratory<h1/>
       -> status (Sub-heading) <h3>stats<h3/>
           Code - 23123 (table data) <table><th>Code</th><tr></tr>23123<table/>
       -> observation (Sub-heading)
            code - 1232 (table data)
            code -12312
       -> ResultValue (Sub-heading)
             -> quantity (Sub -sub heading)
               code - 1232 (table data)
               code -12312
             -> codeableConcept (Sub -sub heading)
               code - 1232 (table data)
               code -12312
    
    -> medications(Main Heading)
       -> status (Sub-heading)
           medications-Code - 23123 (table data)
       -> observation (Sub-heading)
            medications-code - 1232 (table data)
            medications-code -12312
       -> ResultValue (Sub-heading)
             -> quantity (Sub -sub heading)
               medications-code - 1232 (table data)
               medications-code -12312
             -> codeableConcept (Sub -sub heading)
               medications-code - 1232 (table data)
               medications-code -12312
<pre><pre>

datasets.map((data) => {
  Object.keys(data).map((header) => {
    //console.log(header)
    data[header].map((headerData) => {
      if(Array.isArray(data[header])) {
          //console.log(headerData)
      }  else {
          console.log(headerData)
      }
    })
  })
})

What I have tried:

<pre>

How can we display the data in UI by using above datasets ,it might have more nested data .I have to write a generic recursive code while can handle dynamic data rendering in UI without breaking ? The above structure should be like tree structure with accordion so that we can open and close the class and its related sub classes .(Just like a DOM tree like data structure) .Let me know if any further details are needed.
the data will be rendered in HTML view .

I tried using map to render the data its is becoming nested and its not generic .How can we handle data till nth level by using recursion and show in UI ?

Posted 20-Jan-23 22:42pm

Vivek Sharma 3

Updated 21-Jan-23 23:53pm

v2

Add a Solution

Comments

[no name] 21-Jan-23 5:11am

if the 'depth' of your array is limited, you don't really need 'recursion',
the old good nested loops will do the job.

if you have no other choice in mind, a recursion function calls itself, and is often made by division with followings parts : a simple case , and a hard case .those both compounds :

function crawl_array(arg , ... , ...){
if( ... ) {
// simple case here

}else{
// hard case
crawl_array(arg , ... , ...);

 }
}

you have lots of recursion functions available through search engines, and on "geeksforgeeks" website.

Vivek Sharma 3 21-Jan-23 5:28am

here I have nested arrrays and objects not sure where it will end ? How can I write logic for that if a objects is having {},{[]},[],[{}]

datasets.map((data) => {
Object.keys(data).map((header) => {
//console.log(header)
data[header].map((headerData) => {
if(Array.isArray(data[header])) {
//console.log(headerData)
} else {
console.log(headerData)
}
})
})
})

this code should be dynamic not sure how i can make it dynamic so that it can handle all the nesting scenarios ?

2 solutions

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Vivek Sharma 3 · Answer 1 · 2023-01-21T23:53:00

function RecursiveComponent({ content, level = 1 }) {
    const Header = `h${ level }`

    if (Array.isArray(content))
        return <>{ content.map((e, i) => <RecursiveComponent content={e} key={i} level={level} />) }</>

    if (typeof content === 'object') {
        if (content.display && content.value)
            return <div style={{ display: 'flex', gap: '1em', justifyContent: 'center' }}>
                <span>{ content.display }</span>
                <span>{ content.value }</span>
            </div>

        return <>{
            Object.keys(content).map(key => 
                <div key={key}>
                    <Header>{ key }</Header>
                    {<RecursiveComponent content={content[key]} level={level + 1} />}
                </div>
            )
        }</>
    }

    return <span>{ content }</span>
}

So here the solution which I came up with and its working fine .Thanks everyone for you time really appreciate it.

One more things I want to handle in the above scenarios is pagination .What will be the correct way of doing it ?In case any keys is having more than 1 objects ,then we have to show pagination and on change of page we have show that respective object based on index .

Andre Oosthuizen · Answer 2 · 2023-01-21T03:58:00

We can simply map an array with children inside of it, and some of those children have sub-children, and it can go on, your code should look something like this -

import React, { useState } from "react";

export default function Family({ familyTree }) {
  const [isVisible, setIsVisible] = useState(false);
  const expand = () => {
    setIsVisible(!isVisible);
  };
  return (
    <div style={{ paddingLeft: 10 }}>
      <span onClick={expand}>{familyTree.name}</span>
      {isVisible ? (
        familyTree?.children?.map((child) => {
          return (
            <div style={{ paddingLeft: 10 }}>
              <Family familyTree={child} />
            </div>
          );
        })
      ) : (
        <></>
      )}
    </div>
  );
}

To avoid errors for an empty return array (families with no children etc.), just add the question mark as in code. This is known as Optional Chaining.

Recursive functions to render data till nth level of nesting react

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Recursive functions to render data till nth level of nesting react

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us