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.

In your api response you need to have relations between the array elements. How do you determine that ? — Kunal Parekh
– Kunal Parekh, Commented Oct 6, 2018 at 5:44
I am only try to pick up the key and values to display in this format. So there are two attributes i.e id which I will take as a parent node and add few other attributes as its child.This is what my idea is but not sure if I can make this work without changing the backend. — techie_questie
– techie_questie, Commented Oct 6, 2018 at 5:46
You can make an Ajax call using axion in componentDidMount and once you get the response you can set the response in this state. — Kunal Parekh
– Kunal Parekh, Commented Oct 6, 2018 at 5:50
yeah, but how can I render the response in the above format? — techie_questie
– techie_questie, Commented Oct 6, 2018 at 5:55
You can transform your response from server and then set the state. If you can share a sample response from server, then I can help more. — Kunal Parekh
– Kunal Parekh, Commented Oct 6, 2018 at 6:45

Kunal Parekh · Accepted Answer · 2018-10-06 07:04:05Z

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

Collectives™ on Stack Overflow

React JS tree view to display api response

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related