how to show json array by hierarchical sub cats in 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

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": [
        
      ]
    }
  ]`;

Answer 2

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!