Представление дерева React JS для отображения ответа api
В моем приложении для реагирования я реализую древовидную структуру для отображения ответа api в более удобочитаемом формате. Для этого я использую tree view-response-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-response-bootstrap?
Я не уверен, нужно ли мне использовать функцию карты внутри моего метода рендеринга для итерации и отображения данных и как это будет работать. Может ли кто-нибудь сообщить мне, правильно ли я делаю это или есть лучший способ сделать это. заранее спасибо.
Я всего лишь пытаюсь подобрать ключ и значения для отображения в этом формате. Итак, есть два атрибута, т.е. id, который я возьму в качестве родительского узла и добавлю несколько других атрибутов в качестве его дочернего. Это моя идея, но я не уверен, смогу ли я выполнить эту работу, не меняя бэкэнд.
Вы можете сделать вызов Ajax, используя axios в componentDidMount, и как только вы получите ответ, вы можете установить ответ в этом состоянии.
да, но как я могу отобразить ответ в указанном выше формате?
Вы можете преобразовать свой ответ с сервера, а затем установить состояние. Если вы можете поделиться образцом ответа с сервера, я могу больше помочь.
Я добавил образец ответа выше. Я хочу выбрать ключи и значение и показать их в виде дерева.
Добавили ответ. Вы должны быть в состоянии трансформироваться в соответствии с вашими потребностями.
конечно, позвольте мне попробовать это. обновлю здесь.
На самом деле я использую redux для всех своих вызовов API. столкнулся с проблемой с setState - говорит, что "не удается прочитать свойство setState неопределенного". Должен ли я использовать его как componentWillreceiveProps в моей композиции?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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
В вашем ответе api вам необходимо указать отношения между элементами массива. Как вы это определяете?