Реагировать на представление дерева JS для отображения ответа API

Question

В своем приложении реагирования я реализую древовидную структуру для отображения ответа API в более удобочитаемом формате.Для этого я использую дерево view-реакции-bootstrap.

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

Сейчас я использую фиктивные данные, но это формат, в котором я хочу, чтобы мои данные отображались.Ответ API, который у меня есть, это «массив объектов», и он только в одном уровне формата JSON.

Пример ответа -

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

Если вы видите ответ, мне нужен мой ключзначение, которое будет напечатано в древовидной структуре.

Есть ли способ, которым я могу обработать этот ответ, чтобы приспособить его к treeview-реакции-bootstrap?

Я не уверен, нужно ли мне использовать функцию картывнутри моего метода рендеринга для итерации и отображения данных и как это будет работать вместе. Может кто-нибудь сообщить мне, правильно ли я это делаю или есть ли лучший способ сделать это.заранее спасибо.

Answer 1

Вы можете преобразовать ответ примерно так.Только что добавили фиктивный ответ.Пожалуйста, проверьте следующий код и дайте мне знать, если это поможет:

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"));

Вы также можете увидеть его в действии здесь: https://codesandbox.io/s/73ryny9ywq?autoresize=1&hidenavigation=1