movasyl
@movasyl
semper tiro

Как лучше работать с массивом данных?

Помогите, потому что у меня кризис. Не могу догнать как это реализовать:
С сервера, от MongoDb приходит массив объектов такого вида:
let data = [
    {
      name: 'string',
      val1: int,
      val2: int,
      nodes: [
          {
           name: 'string',
           val1: int,
           val2: int,
           nodes: [  ...  ]
          }, 
          {
          // ... 
          }
      ]
    },
    {
    // ...
    }
]

уровень вложенности дочерних массивов не ограничен. То есть каждый узел может иметь любое количество своих дочерних узлов, которые в свою очередь своих. На базе этого массива данных нужно сделать React app с возможностью добавлять новые узлы и подузлы в виде дерева и суммированием дочерних значений в родительских компонентах:
_'${name} | ${val1} | ${val2= val1+childs val2}'
 |___ '${name} | ${val1} | ${val2=val1+childs val2}' // child
 |_____ .....

Как такой массив правильно обходить и с помощью UI редактировать, добавлять и удалять узлы?
Подскажите кто чем может. Заранее благодарен!
ПС: Это мое первое знакомство с React.js но с базовыми принципами ознакомился.
  • Вопрос задан
  • 895 просмотров
Решения вопроса 2
Это обычный рекурсивный обход дерева. Добавление\удаление\редактирование будет зависеть от того как (и где) вы храните данные - flux\redux\whatever. В случае с редаксом - я бы хранил в state дерево в плоском виде (вам нужны будут id, но, думаю, что с монго - это не проблема).

Отображать дерево можно так:

const MySuperTree => (props) => (
  <ul>{props.nodes.map(node => <TreeNode {...node} />)}</ul>
)

class TreeNode extends PureComponent { 
  render() {
    const { name, val1, val2, nodes } = this.props
    return (
      <li>
        <b>{name}  | {val1} | {val1+getValFromChild(childs)} {val2}</b>
        {nodes && nodes.length > 0 && (
          <MySuperTree nodes={nodes} />
        )}
     </li>
    )
  }
}
Ответ написан
vahe_2000
@vahe_2000
я тоже столкнулась с этим.мне повезло что я работал с react-mobx.я вам тоже буду советовать использовать mobx. смотрите здесь https://jsfiddle.net/vaheqelyan/u4t83c5L/
создадим
@observable treeData = [] в Store
в этом будет содержаться массив который будем отправлять в базу данных.
@computed get treeComputed() {
        var obj = {};
        this.treeData.map(function(value, index) {
            if (value.hasOwnProperty("belongs")) {
                var objWithPath = objectPath.get(obj, value.belongs.split("."));

                objWithPath[`text_${value.id}`] = {
                    text: value.name,
                    child: {},
                    belongs: value.belongs,
                    id: value.id,
                    disabled: false,
                    indx: value.indx,
                    visible: value.visible
                };
            } else {
                obj[`text_${value.id}`] = {
                    id: value.id,
                    text: value.name,
                    child: {},
                    mode: "editable",
                    indx: value.indx,
                    disabled: false,
                    visible: value.visible
                };
            }
        });
        return obj;
    }

здесь мы будем с генерировать объекты который и будет показано для пользователей, для этого и будем использовать @computed.
Вычисляемые значения(@computed) — это значения, которые могут быть получены из существующего состояния или других вычисляемых значений.
ну короче у вас есть массив но он будет выглядеть как объект.весь изменения которые будут происходить в объекте будут изменены в массиве и вы будете отправить массив в базу данных,о потом когда будете вынести данный массив вы будете читать как объект так более удобно будет добавить или удалить,изменить...данные

например в firebug добавьте объект в массив
вот наш объект
2c22cf4cff4e42d29af41d358386209b.gif31bb466a36d94e65a61dad9da6f438e4.png
а вот и наш массив для БД
3e06c12b422648db9278980624da36bd.png
я надеюсь что вы поняли что то
я только хотел поделиться с вами с моим опытом
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы