REACT: JSON Tree with the help of Recursion
0
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
JSON
"data": [
{
"id": 25,
"slug": "mobiles",
"parent_id": null,
"name": "Mobiles"
},
{
"id": 26,
"slug": "mobile-phones-accessories",
"parent_id": 25,
"name": "Mobile Phones accessories"
},
{
"id": 27,
"slug": "computer-laptop",
"parent_id": null,
"name": "Computer & Laptop"
},
{
"id": 28,
"slug": "laptops",
"parent_id": 27,
"name": "Laptops"
},
{
"id": 29,
"slug": "mobile-phones",
"parent_id": 26,
"name": "Mobiles Phone"
}
]
My Function (Kindly ignore this. It's just a try but I have got 1 child parent)
renderCategoriesHtml() {
const { categories } = this.props;
if (!categories) return false;
const nullCat = ;
categories.map((obj) => {
if (obj.parent_id == null) {
nullCat.push(obj);
}
});
return nullCat.map(
(parentCat, i) => (
<div className="form-group" key={i}>
<div className="checkbox" key={i}>
<label>
<Field
name={`categories.${parentCat.id}`}
component="input"
type="checkbox"
/>
{parentCat.slug}
</label>
</div>
{
categories.map(
(childCat, j) => (
parentCat.id == childCat.parent_id ?
<div className="checkbox ml-20" key={j}>
<label>
<Field
name={`categories.${childCat.id}`}
component="input"
type="checkbox"
/>
{childCat.slug}
</label>
</div>
: ''
)
)
}
</div>
)
);
}
I want this (That dynamic html i want)
<ul>
<li>mobiles</li>
<ul>
<li>mobile-phones-accessories</li>
<ul>
<li>mobile-phones</li>
</ul>
</ul>
<li>computer-laptop</li>
<ul>
<li>laptops</li>
</ul>
</ul>
javascript reactjs
asked Aug 21 '17 at 6:25
Noman
1,115929
|
show 3 more comments
0
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
JSON
"data": [
{
"id": 25,
"slug": "mobiles",
"parent_id": null,
"name": "Mobiles"
},
{
"id": 26,
"slug": "mobile-phones-accessories",
"parent_id": 25,
"name": "Mobile Phones accessories"
},
{
"id": 27,
"slug": "computer-laptop",
"parent_id": null,
"name": "Computer & Laptop"
},
{
"id": 28,
"slug": "laptops",
"parent_id": 27,
"name": "Laptops"
},
{
"id": 29,
"slug": "mobile-phones",
"parent_id": 26,
"name": "Mobiles Phone"
}
]
My Function (Kindly ignore this. It's just a try but I have got 1 child parent)
renderCategoriesHtml() {
const { categories } = this.props;
if (!categories) return false;
const nullCat = ;
categories.map((obj) => {
if (obj.parent_id == null) {
nullCat.push(obj);
}
});
return nullCat.map(
(parentCat, i) => (
<div className="form-group" key={i}>
<div className="checkbox" key={i}>
<label>
<Field
name={`categories.${parentCat.id}`}
component="input"
type="checkbox"
/>
{parentCat.slug}
</label>
</div>
{
categories.map(
(childCat, j) => (
parentCat.id == childCat.parent_id ?
<div className="checkbox ml-20" key={j}>
<label>
<Field
name={`categories.${childCat.id}`}
component="input"
type="checkbox"
/>
{childCat.slug}
</label>
</div>
: ''
)
)
}
</div>
)
);
}
I want this (That dynamic html i want)
<ul>
<li>mobiles</li>
<ul>
<li>mobile-phones-accessories</li>
<ul>
<li>mobile-phones</li>
</ul>
</ul>
<li>computer-laptop</li>
<ul>
<li>laptops</li>
</ul>
</ul>
javascript reactjs
asked Aug 21 '17 at 6:25
Noman
1,115929
it would help if you'd explain what the problem is and provide an executable example
– thedude
Aug 21 '17 at 6:31
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
– Noman
Aug 21 '17 at 6:36
Instead of directly rendering it, first convert your json into a nested parent child format and then render the content using recursion
– Shubham Khatri
Aug 21 '17 at 6:44
I already did this but not getting a proper result that why I posted here.
– Noman
Aug 21 '17 at 6:47
The question is how deeply can this be nested? Can also mobile accessories have subcategories? But to be honest to you, I would rather think about to reject this kind of data format and talk to the backend to provide some sort of already nested "tree"!
– marpme
Aug 21 '17 at 6:53
|
show 3 more comments
0
0
0
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
JSON
"data": [
{
"id": 25,
"slug": "mobiles",
"parent_id": null,
"name": "Mobiles"
},
{
"id": 26,
"slug": "mobile-phones-accessories",
"parent_id": 25,
"name": "Mobile Phones accessories"
},
{
"id": 27,
"slug": "computer-laptop",
"parent_id": null,
"name": "Computer & Laptop"
},
{
"id": 28,
"slug": "laptops",
"parent_id": 27,
"name": "Laptops"
},
{
"id": 29,
"slug": "mobile-phones",
"parent_id": 26,
"name": "Mobiles Phone"
}
]
My Function (Kindly ignore this. It's just a try but I have got 1 child parent)
renderCategoriesHtml() {
const { categories } = this.props;
if (!categories) return false;
const nullCat = ;
categories.map((obj) => {
if (obj.parent_id == null) {
nullCat.push(obj);
}
});
return nullCat.map(
(parentCat, i) => (
<div className="form-group" key={i}>
<div className="checkbox" key={i}>
<label>
<Field
name={`categories.${parentCat.id}`}
component="input"
type="checkbox"
/>
{parentCat.slug}
</label>
</div>
{
categories.map(
(childCat, j) => (
parentCat.id == childCat.parent_id ?
<div className="checkbox ml-20" key={j}>
<label>
<Field
name={`categories.${childCat.id}`}
component="input"
type="checkbox"
/>
{childCat.slug}
</label>
</div>
: ''
)
)
}
</div>
)
);
}
I want this (That dynamic html i want)
<ul>
<li>mobiles</li>
<ul>
<li>mobile-phones-accessories</li>
<ul>
<li>mobile-phones</li>
</ul>
</ul>
<li>computer-laptop</li>
<ul>
<li>laptops</li>
</ul>
</ul>
javascript reactjs
asked Aug 21 '17 at 6:25
Noman
1,115929
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
JSON
"data": [
{
"id": 25,
"slug": "mobiles",
"parent_id": null,
"name": "Mobiles"
},
{
"id": 26,
"slug": "mobile-phones-accessories",
"parent_id": 25,
"name": "Mobile Phones accessories"
},
{
"id": 27,
"slug": "computer-laptop",
"parent_id": null,
"name": "Computer & Laptop"
},
{
"id": 28,
"slug": "laptops",
"parent_id": 27,
"name": "Laptops"
},
{
"id": 29,
"slug": "mobile-phones",
"parent_id": 26,
"name": "Mobiles Phone"
}
]
My Function (Kindly ignore this. It's just a try but I have got 1 child parent)
renderCategoriesHtml() {
const { categories } = this.props;
if (!categories) return false;
const nullCat = ;
categories.map((obj) => {
if (obj.parent_id == null) {
nullCat.push(obj);
}
});
return nullCat.map(
(parentCat, i) => (
<div className="form-group" key={i}>
<div className="checkbox" key={i}>
<label>
<Field
name={`categories.${parentCat.id}`}
component="input"
type="checkbox"
/>
{parentCat.slug}
</label>
</div>
{
categories.map(
(childCat, j) => (
parentCat.id == childCat.parent_id ?
<div className="checkbox ml-20" key={j}>
<label>
<Field
name={`categories.${childCat.id}`}
component="input"
type="checkbox"
/>
{childCat.slug}
</label>
</div>
: ''
)
)
}
</div>
)
);
}
I want this (That dynamic html i want)
<ul>
<li>mobiles</li>
<ul>
<li>mobile-phones-accessories</li>
<ul>
<li>mobile-phones</li>
</ul>
</ul>
<li>computer-laptop</li>
<ul>
<li>laptops</li>
</ul>
</ul>
javascript reactjs
javascript reactjs
asked Aug 21 '17 at 6:25
Noman
1,115929
asked Aug 21 '17 at 6:25
Noman
1,115929
edited Aug 21 '17 at 6:42
asked Aug 21 '17 at 6:25
Noman
1,115929
asked Aug 21 '17 at 6:25
Noman
1,115929
asked Aug 21 '17 at 6:25
Noman
1,115929
1,115929
it would help if you'd explain what the problem is and provide an executable example
– thedude
Aug 21 '17 at 6:31
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
– Noman
Aug 21 '17 at 6:36
Instead of directly rendering it, first convert your json into a nested parent child format and then render the content using recursion
– Shubham Khatri
Aug 21 '17 at 6:44
I already did this but not getting a proper result that why I posted here.
– Noman
Aug 21 '17 at 6:47
The question is how deeply can this be nested? Can also mobile accessories have subcategories? But to be honest to you, I would rather think about to reject this kind of data format and talk to the backend to provide some sort of already nested "tree"!
– marpme
Aug 21 '17 at 6:53
|
show 3 more comments
it would help if you'd explain what the problem is and provide an executable example
– thedude
Aug 21 '17 at 6:31
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
– Noman
Aug 21 '17 at 6:36
Instead of directly rendering it, first convert your json into a nested parent child format and then render the content using recursion
– Shubham Khatri
Aug 21 '17 at 6:44
I already did this but not getting a proper result that why I posted here.
– Noman
Aug 21 '17 at 6:47
The question is how deeply can this be nested? Can also mobile accessories have subcategories? But to be honest to you, I would rather think about to reject this kind of data format and talk to the backend to provide some sort of already nested "tree"!
– marpme
Aug 21 '17 at 6:53
it would help if you'd explain what the problem is and provide an executable example
– thedude
Aug 21 '17 at 6:31
it would help if you'd explain what the problem is and provide an executable example
– thedude
Aug 21 '17 at 6:31
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
– Noman
Aug 21 '17 at 6:36
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
– Noman
Aug 21 '17 at 6:36
Instead of directly rendering it, first convert your json into a nested parent child format and then render the content using recursion
– Shubham Khatri
Aug 21 '17 at 6:44
Instead of directly rendering it, first convert your json into a nested parent child format and then render the content using recursion
– Shubham Khatri
Aug 21 '17 at 6:44
I already did this but not getting a proper result that why I posted here.
– Noman
Aug 21 '17 at 6:47
I already did this but not getting a proper result that why I posted here.
– Noman
Aug 21 '17 at 6:47
The question is how deeply can this be nested? Can also mobile accessories have subcategories? But to be honest to you, I would rather think about to reject this kind of data format and talk to the backend to provide some sort of already nested "tree"!
– marpme
Aug 21 '17 at 6:53
The question is how deeply can this be nested? Can also mobile accessories have subcategories? But to be honest to you, I would rather think about to reject this kind of data format and talk to the backend to provide some sort of already nested "tree"!
– marpme
Aug 21 '17 at 6:53
|
show 3 more comments
1 Answer
1
active
oldest
votes
2
Try this:
class TreeRender extends React.Component {
state = {
data: JSON.parse('[{"id": 25,"slug": "mobiles","parent_id": null,"name": "Mobiles"},{"id": 26,"slug": "mobile-phones-accessories","parent_id": 25,"name": "Mobile Phones accessories"},{"id": 27,"slug": "computer-laptop","parent_id": null,"name": "Computer & Laptop"},{"id": 28,"slug": "laptops","parent_id": 27,"name": "Laptops"},{"id": 29,"slug": "mobile-phones","parent_id": 26,"name": "Mobiles Phone"}]')
}
getCurrent = (node) => this.state.data.filter(cNode => cNode.parent_id == node).map(cNode => (
<ul key={`node_${cNode.id}`}>
<li>{cNode.name}</li>
{this.getCurrent(cNode.id)}
</ul>
))
render() {
return (
<div>
{this.getCurrent(null)}
</div>
);
}
}
FIDDLE
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
Boy loves u. Thank u so much .. !!
– Noman
Aug 21 '17 at 7:43
I posted a similar question at stackoverflow.com/questions/52349417/… - though mine is using a nested JSON file rather than node ids.
– kojow7
Sep 16 at 5:36
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45790499%2freact-json-tree-with-the-help-of-recursion%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Try this:
class TreeRender extends React.Component {
state = {
data: JSON.parse('[{"id": 25,"slug": "mobiles","parent_id": null,"name": "Mobiles"},{"id": 26,"slug": "mobile-phones-accessories","parent_id": 25,"name": "Mobile Phones accessories"},{"id": 27,"slug": "computer-laptop","parent_id": null,"name": "Computer & Laptop"},{"id": 28,"slug": "laptops","parent_id": 27,"name": "Laptops"},{"id": 29,"slug": "mobile-phones","parent_id": 26,"name": "Mobiles Phone"}]')
}
getCurrent = (node) => this.state.data.filter(cNode => cNode.parent_id == node).map(cNode => (
<ul key={`node_${cNode.id}`}>
<li>{cNode.name}</li>
{this.getCurrent(cNode.id)}
</ul>
))
render() {
return (
<div>
{this.getCurrent(null)}
</div>
);
}
}
FIDDLE
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
Boy loves u. Thank u so much .. !!
– Noman
Aug 21 '17 at 7:43
I posted a similar question at stackoverflow.com/questions/52349417/… - though mine is using a nested JSON file rather than node ids.
– kojow7
Sep 16 at 5:36
add a comment |
2
Try this:
class TreeRender extends React.Component {
state = {
data: JSON.parse('[{"id": 25,"slug": "mobiles","parent_id": null,"name": "Mobiles"},{"id": 26,"slug": "mobile-phones-accessories","parent_id": 25,"name": "Mobile Phones accessories"},{"id": 27,"slug": "computer-laptop","parent_id": null,"name": "Computer & Laptop"},{"id": 28,"slug": "laptops","parent_id": 27,"name": "Laptops"},{"id": 29,"slug": "mobile-phones","parent_id": 26,"name": "Mobiles Phone"}]')
}
getCurrent = (node) => this.state.data.filter(cNode => cNode.parent_id == node).map(cNode => (
<ul key={`node_${cNode.id}`}>
<li>{cNode.name}</li>
{this.getCurrent(cNode.id)}
</ul>
))
render() {
return (
<div>
{this.getCurrent(null)}
</div>
);
}
}
FIDDLE
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
Boy loves u. Thank u so much .. !!
– Noman
Aug 21 '17 at 7:43
I posted a similar question at stackoverflow.com/questions/52349417/… - though mine is using a nested JSON file rather than node ids.
– kojow7
Sep 16 at 5:36
add a comment |
2
2
2
Try this:
class TreeRender extends React.Component {
state = {
data: JSON.parse('[{"id": 25,"slug": "mobiles","parent_id": null,"name": "Mobiles"},{"id": 26,"slug": "mobile-phones-accessories","parent_id": 25,"name": "Mobile Phones accessories"},{"id": 27,"slug": "computer-laptop","parent_id": null,"name": "Computer & Laptop"},{"id": 28,"slug": "laptops","parent_id": 27,"name": "Laptops"},{"id": 29,"slug": "mobile-phones","parent_id": 26,"name": "Mobiles Phone"}]')
}
getCurrent = (node) => this.state.data.filter(cNode => cNode.parent_id == node).map(cNode => (
<ul key={`node_${cNode.id}`}>
<li>{cNode.name}</li>
{this.getCurrent(cNode.id)}
</ul>
))
render() {
return (
<div>
{this.getCurrent(null)}
</div>
);
}
}
FIDDLE
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
Try this:
class TreeRender extends React.Component {
state = {
data: JSON.parse('[{"id": 25,"slug": "mobiles","parent_id": null,"name": "Mobiles"},{"id": 26,"slug": "mobile-phones-accessories","parent_id": 25,"name": "Mobile Phones accessories"},{"id": 27,"slug": "computer-laptop","parent_id": null,"name": "Computer & Laptop"},{"id": 28,"slug": "laptops","parent_id": 27,"name": "Laptops"},{"id": 29,"slug": "mobile-phones","parent_id": 26,"name": "Mobiles Phone"}]')
}
getCurrent = (node) => this.state.data.filter(cNode => cNode.parent_id == node).map(cNode => (
<ul key={`node_${cNode.id}`}>
<li>{cNode.name}</li>
{this.getCurrent(cNode.id)}
</ul>
))
render() {
return (
<div>
{this.getCurrent(null)}
</div>
);
}
}
FIDDLE
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
answered Aug 21 '17 at 7:22
Vanojx1
4,18021025
4,18021025
Boy loves u. Thank u so much .. !!
– Noman
Aug 21 '17 at 7:43
I posted a similar question at stackoverflow.com/questions/52349417/… - though mine is using a nested JSON file rather than node ids.
– kojow7
Sep 16 at 5:36
add a comment |
Boy loves u. Thank u so much .. !!
– Noman
Aug 21 '17 at 7:43
I posted a similar question at stackoverflow.com/questions/52349417/… - though mine is using a nested JSON file rather than node ids.
– kojow7
Sep 16 at 5:36
Boy loves u. Thank u so much .. !!
– Noman
Aug 21 '17 at 7:43
Boy loves u. Thank u so much .. !!
– Noman
Aug 21 '17 at 7:43
I posted a similar question at stackoverflow.com/questions/52349417/… - though mine is using a nested JSON file rather than node ids.
– kojow7
Sep 16 at 5:36
I posted a similar question at stackoverflow.com/questions/52349417/… - though mine is using a nested JSON file rather than node ids.
– kojow7
Sep 16 at 5:36
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f45790499%2freact-json-tree-with-the-help-of-recursion%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
it would help if you'd explain what the problem is and provide an executable example
– thedude
Aug 21 '17 at 6:31
The JSON backend guys provide me its multiple parent child so I have to put the dynamic loop to show parent child.
– Noman
Aug 21 '17 at 6:36
Instead of directly rendering it, first convert your json into a nested parent child format and then render the content using recursion
– Shubham Khatri
Aug 21 '17 at 6:44
I already did this but not getting a proper result that why I posted here.
– Noman
Aug 21 '17 at 6:47
The question is how deeply can this be nested? Can also mobile accessories have subcategories? But to be honest to you, I would rather think about to reject this kind of data format and talk to the backend to provide some sort of already nested "tree"!
– marpme
Aug 21 '17 at 6:53