как написать цикл который затронет все элементы многомерного массива

211

15 августа 2017, 16:42

Есть ответ от сервера

{"test3":{"1":"#9a4343",
          "3":"#a98181",
          "5":"#b52b2b",
          "7":"#907c7c"},
 "test1":{"test2":{"test5":{"2":"#774c4c",
                            "4":"#cc9999"}},
          "test4":{"6":"#385f82",
                   "8":"#9a5a5a"}}}

нужно написать цикл который затронет все элементы многомерного массива чтобы не зависимо сколько вложений будет в массиве вывело каждый цвет в виде квадрата (массив может меняться на типовой, но при этом алгоритм должен работать. многомерность может быть более глубокой) Спасибо.

Answer 1

Порядок цветных квадратов не определён, т.к. значения в объектах хранятся в не упорядоченном виде.

//типа отрисовка квадратов 
const draw_square = color => $( document.body ).append(`<div style="background-color: ${color}" class="square"> ${color} </div>`); 
     
//рекурсивный обход объекта 
const each_color = (callback, obj) => Object.values( obj ).forEach( value => typeof value === 'object' && value !== null ? each_color( callback, value ) : callback( value ) ) 
 
let data = {"test3":{"1":"#9a4343", 
                     "3":"#a98181", 
                     "5":"#b52b2b", 
                     "7":"#907c7c"}, 
            "test1":{"test2":{"test5":{"2":"#774c4c", 
                                       "4":"#cc9999"}}, 
                     "test4":{"6":"#385f82", 
                              "8":"#9a5a5a"}}} 
     
     
each_color( draw_square, data )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
<style> 
.square{ 
  width: 100px; 
  height: 100px; 
  display: inline-block; 
  margin-right: 10px; 
  margin-bottom: 10px; 
} 
</style>