How to show nested json on Ui using react

Question

I have a nested JSON, by which I am making a UI, I have successfully created the first part, Issue I am facing is for the second part.

What I am trying to do

I have a nested json by which I am showing parent element, now what I want to do is on click of any parent it should show that particular data.

suppose I click on parent1 so it should show child of parent one.

My JSON data

    [
  {
    "name": "parent1",
    "url": "url1",
    "child": [
      {
        "name": "child1",
        "url": "child_url1",
        "grand_child": [
          {
            "name": "some name",
            "url": "some url"
          }
        ]
      },
      {
        "name": "child2",
        "url": "child_url2"
      },
      {
        "name": "child3",
        "url": "child_url3"
      }
    ]
  },
  {
    "name": "parent2",
    "url": "url2",
    "child": [
      {
        "name": "child22",
        "url": "child_url22"
      }
    ]
  },
  {
    "name": "parent3",
    "url": "url3",
    "child": [
      {
        "name": "child33",
        "url": "child_url33"
      },
      {
        "name": "child44",
        "url": "child_url44"
      },
      {
        "name": "child55",
        "url": "child_url55"
      }
    ]
  }
]

What I am doing

<div className="row">
            {d.map((li) => (
                <div className="col-12 col-sm-12 col-md-6 col-lg-4 col-xl-4">
                    <div onClick={() => on_click}>{li.name}</div>
                </div>
            ))}
        </div>

But now I don't know how to show other part after onClick how to have that particular data.

What I am trying to acheive is something like this Code sandbox

in my code sandbox I am just showing parent3 children (assuming that is clicked at that time)

Mohan Rajput · Accepted Answer · 2020-07-24 06:45:55Z

1

As per my understanding you want to show the children elements when parent is clicked & all code resides in a single react function component.

So I've changed your code little bit from the Code Sandbox & used React State Hooks to achieve you feature. Check the code sample : Code Sandbox Demo

Hope this is what you're looking for. Peace

answered Jul 24, 2020 at 6:45

Mohan Rajput

6429 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

manish thakur Over a year ago

hey the same i want to do with json data dynamically.

Mohan Rajput Over a year ago

@manishthakur please check the updated example from code sandbox with dynamic data.

manish thakur Over a year ago

I am testing it, with real data let me test at the fullest

Mohan Rajput Over a year ago

What do you mean by blank space?

manish thakur Over a year ago

Hey could you please help me on this stackoverflow.com/questions/63814645/… I am stuck here from long time now

Erick · Accepted Answer · 2020-07-23 13:42:20Z

0

I am assuming you are getting your json as a prop to the component.You need to call the renderParent function that would handle the rendering of the complete json including the child array.

function renderChild(child) {
    return child && child.map((childItem)=>(
      <div>{childItem.name}</div>
    ))
  }

  function renderParent() {
    return props.data && props.data.map(item => ( <div>
    <div>{item.name}</div>
    // add your parent json data here for rendering
    <div>{renderChild(item.child)}</div>
    </div>));
  }

return (
  <div>
  {renderParent()}
  </div>
);

answered Jul 23, 2020 at 13:42

Erick

1,1461 gold badge12 silver badges25 bronze badges

1 Comment

manish thakur Over a year ago

I have data in same component, and that data i want to render in that same component, parent i am able to now I want to render child on click of respective parent

Shivang Gupta · Accepted Answer · 2020-07-24 06:46:33Z

0

Use the pre tag and json string to it.

<pre>{JSON.stringify(YOUR_JSON)}</pre>

answered Jul 24, 2020 at 6:46

Shivang Gupta

3,3791 gold badge28 silver badges25 bronze badges

Comments

dpmemcry · Accepted Answer · 2020-07-24 10:38:00Z

0

You can show nested json element using divBody value

 let divBody = nestedJsonArray.map(item => (
              <div>
                <div>{item.url}</div>
                <div>{item.name}</div>
                <div>
                 {
                    item.child.map(citem=>(
                      <div>{citem.name}</div>
                    ))
                 }
                </div>
              </div>
            ));

edited Jul 24, 2020 at 10:38

answered Jul 24, 2020 at 7:14

dpmemcry

1171 silver badge4 bronze badges

Comments

bakar_dev · Accepted Answer · 2020-07-29 06:45:39Z

Check this out...you need to save current parent child on parent click, and i am saving in the state and then showing only that child, here is code sandbox link: https://codesandbox.io/s/priceless-robinson-yk03j?file=/src/App.js:0-2010

import React, { useState } from "react";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";

const data = [
  {
    name: "parent1",
    url: "url1",
    child: [
      {
        name: "child1",
        url: "child_url1",
        grand_child: [
          {
            name: "some name",
            url: "some url"
          }
        ]
      },
      {
        name: "child2",
        url: "child_url2"
      },
      {
        name: "child3",
        url: "child_url3"
      }
    ]
  },
  {
    name: "parent2",
    url: "url2",
    child: [
      {
        name: "child22",
        url: "child_url22"
      }
    ]
  },
  {
    name: "parent3",
    url: "url3",
    child: [
      {
        name: "child33",
        url: "child_url33"
      },
      {
        name: "child44",
        url: "child_url44"
      },
      {
        name: "child55",
        url: "child_url55"
      }
    ]
  }
];

export default function App() {
  const [child, setChild] = useState([]);
  const [currentParent, setCurrentParent] = useState("");

  const on_click = name => {
    const parent = data.filter(parent => parent.name === name);
    console.log(parent);
    setCurrentParent(parent[0].name);
    setChild(parent[0].child);
  };

  return (
    <div className="App">
      <div className="row">
        {data.map((parent, i) => (
          <div className="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4" key={i}>
            <div onClick={() => on_click(parent.name)}>{parent.name}</div>
            {currentParent === parent.name &&
              child.map((data, i) => (
                <div key={i}>
                  {data.name}{" "}
                  {data.grand_child &&
                    data.grand_child.map((gc, i) => (
                      <li className="pl-4 ml-4" key={i}>
                        {gc.name}
                      </li>
                    ))}
                  <br />
                </div>
              ))}
          </div>
        ))}
      </div>
    </div>
  );
}

hey you have not done it for grand child, suppose child1 has some grand child but when I click there nothing is happening ?
thanks for pointing out the issue, i have updated the code with grand child.

Collectives™ on Stack Overflow

How to show nested json on Ui using react

5 Answers 5

5 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related