Как осуществить редактирование или добавление элемента в многомерный ассоциативный массив?

Question

[Stanislav Chernomorchenko]

В общем суть проблемы заключается в следующем. У меня есть массив следующего содержания.

{
  "name": "files",
  "type": "folder",
  "path": "files",
  "lastMod": "10.11.2014",
  "items": [{
              "name": "Новая папка",
              "type": "folder",
              "path": "files\/Новая папка",
              "lastMod": "10.11.2014",
              "items": [{
                          "name": "87",
                          "type": "folder",
                          "path": "files\/Новая папка\/87",
                          "lastMod": "10.11.2014",
                          "items": [{
                                      "name": "872323",
                                      "type": "folder",
                                      "path": "files\/Новая папка\/87",
                                      "lastMod": "10.11.2014",
                                      "items": []
                                    }, {
                                      "name": "lola.txt",
                                      "type": "txt",
                                      "path": "files\/Новая папка\/87\/lola.txt",
                                      "lastMod": "10.11.2014",
                                      "content":"Hi i am Josh!"
                                    }]

                        },
                        {
                          "name": "87w",
                          "type": "folder",
                          "path": "files\/Новая папка\/87w",
                          "lastMod": "10.11.2014",
                          "items": [{
                                      "name": "872323",
                                      "type": "folder",
                                      "path": "files\/Новая папка\/87",
                                      "lastMod": "10.11.2014",
                                      "items": []
                                    }, {
                                      "name": "lola.txt",
                                      "type": "txt",
                                      "path": "files\/Новая папка\/87\/lola.txt",
                                      "lastMod": "10.11.2014",
                                      "content":"Hi i am Josh!"
                                    }]

                        },{
                          "name": "lola.wma",
                          "type": "wma",
                          "path": "files\/Новая папка\/lola.wma",
                          "lastMod": "10.11.2014"
                        }]
            }, {
              "name": "place your file here.txt",
              "type": "txt",
              "path": "files\/place your file here.txt",
              "lastMod": "10.11.2014",
              "content":"Hi i am Josh!"
            }, {
              "name": "data.json",
              "type": "json",
              "path": "files\/data.json",
              "lastMod": "10.11.2014"
            }]
}

Как можно организовать на js удаление и добавление элементов в его дочерние структуры?

Answer 1

[asdz]

Сложно понять вашу структуру данных если не обрамлена в code.
Как бы сделал я: сделал бы дерево. В узлах - свойства, если свойство объект - то узел раскрывается и так далее. Вам только нужно сделать редактирование названий узлов, изменение значений в узлах, добавление/ удаление узлов.

Comments

[Stanislav Chernomorchenko]

Поправил структуру.
В общем суть в следующем вот у нас есть основной элемент "files" который имеет массив items как мне в данный массив вставить новый элемент на. В общем в дочерний ресурс. А то не совсем понимаю как мне отловить момент когда PUSH надо делать

[asdz]

Stanislav Chernomorchenko: Можно использовать плагин www.jstree.com/docs/json/, у него есть события, обрабатывая которые во можете добавлять/удалять элементы в дереве. Либо, воспользоваться https://rniemeyer.github.io/knockout-kendo/web/Tre... либо так jsfiddle.net/Ar88e/1/. Обратите внимание, что в последнем примере как раз структура данных похожая как у вас.

[Stanislav Chernomorchenko]

asdz: Мальца не. Саму структуру я построил сам там делов не много. Меня интересует именно как отредактировать данные без использования бек-енда.
найти например папку с именем 87 и вставить в нее новый дочерний элемент.

[asdz]

Для этого вам нужно визуализировать данные и связать визуальное представление со экземпляром данных представляющих вот такую структуру, Это на джаваскрипте. Визуализировать вашу структуру можно теми библиотеками что я привел, ими же можно обеспечить либо событийную привязку визуального представления с вашими данными, либо связывание данные с помощью knockout. Например jstree имеет события www.jstree.com/api/#/?q=.jstree%20Event такие как открытие узла, выделение узла, также есть методы удаления, добавления узлов. Используя все эти возможности вы без особого труда сможете сделать редактор дерева, т.е. вашей структуры на клиенте с использованием js.

[Stanislav Chernomorchenko]

Мне больше интересно как своими руками это сделать.

[asdz]

а, просто добавить в объект подобъект? Очень просто, нужно рекурсивно обойти дерево, найти объект с нужным id и в коллекцию files добавить что нибудь:

node - найденный узел
item- то что хотим добавить
node.items.push(item)

[Stanislav Chernomorchenko]

asdz: А пример в коде можно? Так как у меня все переписываеться нодом.

[asdz]

Stanislav Chernomorchenko: а что именно показать, какие операции?

[Stanislav Chernomorchenko]

Хотя бы добавление. На его основе уже други не беда построить.

[Stanislav Chernomorchenko]

asdz: Все заработало через фор ич) Раскоментировал и работает..
Хм..
Магия) Но вам спасибо за компанию. И за советы

Answer 2

[GreatRash]

Это обыкновенный JSON. Например добавляем новый итем:

var data = { /* ваши данные */ };

var newItem = {
  "name": "Ещё одна папка",
  "type": "folder",
  "path": "folders\/Ещё одна папка",
  "lastMod": "10.12.2014",
  "items": [ /* массив файлов внутри папки */ ]
};

/* добавляем в массив папок ещё одну */
data.items.push(newItem);