how to show json array by hierarchical sub cats in react native - react-native

Question

I receive through api one json with this structure. And I want to display the objects as follows. But I do not know in map array by react native how to get in objects and sub-objects.
import React from 'react'
import { View, Text } from 'react-native'
const Categoris = () => {
const terms = ` [
{
"term_id": 15,
"name": "Uncategorized",
"children": [
]
},
{
"term_id": 21,
"name": "Clothing",
"children": [
{
"term_id": 24,
"name": "Accessories",
"children": [
{
"term_id": 24,
"name": "Accessories",
"children": [
]
},
{
"term_id": 23,
"name": "Hoodies",
"children": [
]
},
{
"term_id": 22,
"name": "Tshirts",
"children": [
]
}
]
},
{
"term_id": 23,
"name": "Hoodies",
"children": [
]
},
{
"term_id": 22,
"name": "Tshirts",
"children": [
]
}
]
},
{
"term_id": 26,
"name": "Decor",
"children": [
]
},
{
"term_id": 25,
"name": "Music",
"children": [
]
}
]`
function recursive(arrayJson, level=0)
{
let childrenComp = null
if(arrayJson.children)
childrenComp = recursive(arrayJson.children, level++)
return <>
<Text>{level > 0 && "-".repeat(level)}{arrayJson.name}</Text>
{childrenComp}
</>
}
const components = recursive(terms)
return (
<View>{components}</View>
)
}
export default Categoris
And I want to show it this way:
Uncategorized
Clothing
-Accessories
--Bike
--Engine
---Bench
--Airplane
Hoodies
Tshirts
But not show anything!!!

Answer 1

Result:
Uncategorized
Clothing
-Accessories
--Accessories
--Hoodies
--Tshirts
-Hoodies
-Tshirts
Decor
Music
import { StatusBar } from "expo-status-bar";
import React, { ReactNode } from "react";
import { StyleSheet, Text, View } from "react-native";
export default function App() {
const recursive = (data: Item[], level = 0): ReactNode => {
return data.map((item) =>
item.children?.length ? (
<>
{renderItem(level, item.name)}
{recursive(item.children, level + 1)}
</>
) : (
renderItem(level, item.name)
)
);
};
const renderItem = (level: number, name: string) => (
<Text style={styles.item}>
{level > 0 && "-".repeat(level)}
{name}
</Text>
);
return (
<View style={styles.container}>
{recursive(terms)}
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
item: {
alignSelf: "flex-start",
},
container: {
flex: 1,
backgroundColor: "#fff",
padding: 50,
},
});
interface Item {
term_id: number;
name: string;
children?: Item[];
}
const terms: Item[] = [
{
term_id: 15,
name: "Uncategorized",
children: [],
},
{
term_id: 21,
name: "Clothing",
children: [
{
term_id: 24,
name: "Accessories",
children: [
{
term_id: 24,
name: "Accessories",
children: [],
},
{
term_id: 23,
name: "Hoodies",
children: [],
},
{
term_id: 22,
name: "Tshirts",
children: [],
},
],
},
{
term_id: 23,
name: "Hoodies",
children: [],
},
{
term_id: 22,
name: "Tshirts",
children: [],
},
],
},
{
term_id: 26,
name: "Decor",
children: [],
},
{
term_id: 25,
name: "Music",
children: [],
},
];
Enjoy!

Answer 2

I have created a sample code for you. you just need to add your React native UI Tags, function remains same
import React from 'react';
export default function Cate() {
let data = JSON.parse(terms);
console.log(data, 'data is the ');
const getCate = (data = []) => {
return data.map((item) => (
<div>
<h3>{item.name}</h3>
<div style={{ marginLeft: 20 }}> {item.children &&
getCate(item.children)}</div>
</div>
));
};
return (
<div>
<h1>Testing</h1>
{getCate(data)}
</div>
);
}
const terms = ` [
{
"term_id": 15,
"name": "Uncategorized",
"children": [
]
},
{
"term_id": 21,
"name": "Clothing",
"children": [
{
"term_id": 24,
"name": "Accessories",
"children": [
{
"term_id": 24,
"name": "Accessories",
"children": [
]
},
{
"term_id": 23,
"name": "Hoodies",
"children": [
]
},
{
"term_id": 22,
"name": "Tshirts",
"children": [
]
}
]
},
{
"term_id": 23,
"name": "Hoodies",
"children": [
]
},
{
"term_id": 22,
"name": "Tshirts",
"children": [
]
}
]
},
{
"term_id": 26,
"name": "Decor",
"children": [
]
},
{
"term_id": 25,
"name": "Music",
"children": [
]
}
]`;