Получение данных

Данные регионов можно хранить в разном виде.

Наиболее естественное представление дерева -- в виде вложенного объекта: свойство children содержит поддеревья.

Выглядит это так:

var regions = [
  {
    title: 'Россия',
    id: 1,
    children: [
      { 
        title: 'Центр',
        id: 2,
        children: [ ... поддеревья ... ]
      },
      ...
    }
  }
  ...
]

У такого вложенного объекта есть важный недостаток: сложно перейти напрямую к узлу по ID. Нужно "прыгать" по дереву.

Поэтому может быть более удобен другой вариант:

var regions = [
  {
    title: 'Россия',
    id: 1,
    children: [ 2 ]
  },
  { 
    title: 'Центр',
    id: 2,
    children: [ ... ]
  },
  ...
]

..То есть, массив содержит все узлы дерева, и каждый узел хранит в children список id детей.

Но и это не совсем удобно. Ведь хочется по ID получить данные. Значит, нужно хранить не массив, а объект вида id => { title: .., id: .., children: [... ] }.

Свойство `children` может отсутствовать, если детей нет.
`id` есть и в ключе объекта и в данных узла. Так удобнее.
Список внешних узлов дерева содержится в корневом узле без имени, с `id = 0`.

Выберите наиболее симпатичную структуру и получите её из исходного документа.

Данные

Скрипт для получения данных в последнем формате, описанном выше: fetch.js.

Результат в файле (после JSON.stringify): regions.js.

Исправления

Желательно сделать следующие исправления:

Переделать вёрстку. В частности, заменить текстовые + - на оформление при помощи CSS.
Оформить всё в виде виджета с шаблоном.
Использовать ленивый рендеринг! Не рисовать всё дерево сразу (зачем рисовать то, чего не видно?), а дорисовывать при открытии.

2.8 KiB Raw Blame History Unescape Escape

Получение данных

Данные

Исправления

Решение

2.8 KiB

Raw Blame History