Dans mon application React, j'implémente une structure arborescente pour afficher la réponse de l'API dans un format plus lisible. J'utilise tree view-react-bootstrap pour cela.

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

J'utilise des données factices pour le moment, mais c'est le format dans lequel je souhaite que mes données soient affichées. La réponse api que j'ai est "tableau d'objets" et ce n'est que dans un format JSON à un niveau.

Exemple de réponse -

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

Si vous voyez la réponse, je voudrais que ma valeur de clé soit imprimée dans une structure arborescente.

Existe-t-il un moyen de rendre cette réponse pour s'adapter à treeview-react-bootstrap?

Je ne sais pas si j'ai besoin d'utiliser la fonction map dans ma méthode de rendu pour itérer et afficher les données et comment cela fonctionnera. Quelqu'un peut-il me dire si je le fais correctement ou existe-t-il une meilleure façon de le faire. Merci d'avance.

0
techie_questie 6 oct. 2018 à 08:30

1 réponse

Meilleure réponse

Vous pouvez transformer la réponse quelque chose comme ceci. Je viens d'ajouter une réponse fictive. Veuillez vérifier le code suivant et laissez-moi savoir si cela vous aide :

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

Vous pouvez également le voir en action ici : https://codesandbox.io/s/73ryny9ywq ?autoresize=1&hidenavigation=1

2
Kunal Parekh 6 oct. 2018 à 10:04