Question 110126 in Json Question posted in
Our archive of expertly curated questions and answers provides insights and solutions to common problems related to this popular data interchange format. From parsing and manipulating JSON data to integrating it with various programming languages and web services, our archive has got you covered. Start exploring today and take your JSON skills to the next level

Json – Recursive functions to render data till nth level of nesting react

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

enter image description here
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 ?

data.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)
      }
    })
  })
})

And how can we handle pagination for every keys(laboratory ,medications) if any of the key is having more than one object ?(Attached screenshot below on how pagination will look on class level)

Tags:

2

Answers


  1. 0

    I made this recursive component which seems to achieve what you want. Of course it is up to you to style it properly :

    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>
}

    Hope it helped you !

    Login or Signup to reply.
  2. 0

    If I understood accurately what you wanted, this seems to do the job :

    import { useState } from 'react'

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"
            }
          ]
        }
      },
      {
        "status": {
          display: "Code",
          value: "Value on page 2"
        },
        "observation": [
          {
            display: "Code",
            value: "Value on page 2"
          },
          {
            display: "Code",
            value: "Value on page 2"
          }
        ],
        "resultValue": {
          "quantity": [
            {
              display: "Code",
              value: "Value on page 2"
            },
            {
              display: "Code",
              value: "Value on page 2"
            }
          ],
          "codeableConcept": [
            {
              display: "Code",
              value: "Value on page 2"
            },
            {
              display: "Code",
              value: "Value on page 2"
            }
          ]
        }
      }
    ]
  },
  {
    "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"
            }
          ]
        }
      },
      {
        "status": {
          display: "medications - Code",
          value: "Medication value on page 2"
        },
        "observation": [
          {
            display: "medications -Code",
            value: "Medication value on page 2"
          },
          {
            display: "medications- Code",
            value: "Medication value on page 2"
          }
        ],
        "resultValue": {
          "quantity": [
            {
              display: "medications- Code",
              value: "Medication value on page 2"
            },
            {
              display: "medications-Code",
              value: "Medication value on page 2"
            }
          ],
          "codeableConcept": [
            {
              display: "medications-Code",
              value: "Medication value on page 2"
            },
            {
              display: "medications- Code",
              value: "Medication value on page 2"
            }
          ]
        }
      }
    ]
  }
]

function App() {
    return <RecursiveComponent content={data} />
}

function PaginatedComponent ({ content, level }) {
    const [page, setPage] = useState(0)
    const l = content.length - 1;

    return <>
        <div>
            <button onClick={() => setPage(page => page - 1)} disabled={page === 0}>{'<'}</button>
            <span>{ page + 1 } / { l + 1 }</span>
            <button onClick={() => setPage(page => page + 1)} disabled={page === l}>{'>'}</button>
        </div>

        <RecursiveComponent level={level + 1} content={content[page]}></RecursiveComponent>
    </>
}

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

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

    if (paginated)
        return <>{
            Object.keys(content).map(key =>
                <div key={key}>
                    <Header>{ key }</Header>
                    <PaginatedComponent key={key} content={content[key]} level={level} />
                </div>
            )
        }</>

    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>
}

    Hope it helped you !

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search