React JS tree view to display api response

Question

In my react application, I am implementing a tree view structure to display the api response in more readable format. I am using tree view-react-bootstrap for that.

import React from 'react';
import ReactDOM from 'react-dom';
import TreeView from 'treeview-react-bootstrap'

class Example extends React.Component {
    constructor(){
        super();
        // SET YOUR DATA
        this.state = {
            data: [
                {
                    text: "John Peter",
                    nodes: [
                      {
                        text: "ID: 11111",
                        nodes: [
                          {
                            text: "VIN"
                          },
                          {
                            text: "Policy Effective Date"
                          },
                          {
                            text: "Policy Expiration Date"
                          },
                          {
                            text: "Vehicle Make"
                          },
                          {
                            text: "Vehicle Model"
                          }
                        ]
                      },
                      {
                        text: "ID: 123456",
                        nodes: [
                            {
                              text: "VIN"
                            },
                            {
                              text: "Policy Effective Date"
                            },
                            {
                              text: "Policy Expiration Date"
                            },
                            {
                              text: "Vehicle Make"
                            },
                            {
                              text: "Vehicle Model"
                            }
                          ]
                      }
                    ]
                  },
                  {
                    text: "Scott Brown"
                  }
            ]
        }

    }

    render(){
        return (
            // RENDER THE COMPONENT
            <TreeView data={this.state.data} />
        );
    }
}

export default Example

I am using dummy data for now but this is the format that I want my data to be displayed. The api response I have is "array of objects" and it is only in one level JSON format.

Sample response -

[
                    {
                        "id": "1234",
                        "name": "John Scott",
                        "vin": "45",
                        "make": "Toyota",
                        "model": "Etios"
                    },
                    {
                        "id": "4567",
                        "name": "James Scott",
                        "vin": "67",
                        "make": "Hyundai",
                        "model": "Etios"
                    }
]

If you see the response, I would like my key value to be printed in a tree structure.

Is there a way I can render this response to accommodate with treeview-react-bootstrap?

I am not sure if I need to use map function inside my render method to iterate and display the data and how will it work along.Can someone let me know if I am doing it right or is there any better way of doing it. thanks in advance.

Answer 1

You can transform the response something like this. Have just added a dummy response. Please check the following code and let me know if this helps:

import React from "react";
import ReactDOM from "react-dom";
import TreeView from "treeview-react-bootstrap";
import axios from "axios";

class Example extends React.Component {
    constructor() {
        super();
        // SET YOUR DATA
        this.state = {
            data: []
        };
    }
    componentDidMount() {
        axios
            .get("https://www.mocky.io/v2/5bb85d723000005f00f93bb6")
            .then(data => {
                let transformedData = data.data.map(d => {
                    return {
                        text: d.text,
                        nodes: [
                            {
                                text: "dummy 1",
                                nodes: []
                            }
                        ]
                    };
                });
                this.setState({ data: transformedData });
            });
    }

    render() {
        return (
            // RENDER THE COMPONENT
            <TreeView data={this.state.data} />
        );
    }
}

ReactDOM.render(<Example />, document.getElementById("app"));

You can also see it in action here: https://codesandbox.io/s/73ryny9ywq?autoresize=1&hidenavigation=1