Получить список из javascript объекта

Question

Я новичок в javascript и пытаюсь выяснить, как получить список из компонентов этого объекта.

Мне нужно только выбрать js ключей из mndatory

var components = {
  mandatory: {
    alert: {
      js: ['./bootstrap/js/alert.js'],
      css: ['./bootstrap/css/alert.css', './bootstrap/css/alert2.css'],
    },
    button: {
      js: ['./bootstrap/js/button.js'],
      css: ['./bootstrap/css/button.css'],
    },
    dropdown: {
      js: ['./bootstrap/js/dropdown.js'],
      css: ['./bootstrap/css/dropdown.css'],
    },
  },
  optional: {
    carousel: {
      js: ['./bootstrap/js/carousel.js'],
      css: ['./bootstrap/css/carousel.css'],
    },
    modal: {
      js: ['./bootstrap/js/modal.js'],
      css: ['./bootstrap/css/modal.css'],
    },
  },
};

Таким образом, результатом будет выбор только клавиш js:

[
    './bootstrap/js/alert.js',
    './bootstrap/js/button.js',
    './bootstrap/js/dropdown.js'
]

Я очень ценю вашу помощь.

Answer 1

Что-то вроде приведенного ниже кода должно помочь вам. Пожалуйста, попытайтесь понять, как работает приведенный ниже код.

var components = {
    mandatory: {
            alert: {
                js: ['./bootstrap/js/alert.js'],
                css: [
                      './bootstrap/css/alert.css',
                      './bootstrap/css/alert2.css'
                    ]
            },
            button: {
                js: ['./bootstrap/js/button.js'],
                css: ['./bootstrap/css/button.css']
            },
            dropdown: {
                js: ['./bootstrap/js/dropdown.js'],
                css: ['./bootstrap/css/dropdown.css']
            }
    },
    optional: {
        carousel: {
            js: ['./bootstrap/js/carousel.js'],
            css: ['./bootstrap/css/carousel.css']
        },
        modal: {
            js: ['./bootstrap/js/modal.js'],
            css: ['./bootstrap/css/modal.css']
        }
    }
}

var array = [components.mandatory.alert.js, components.mandatory.button.js, components.mandatory.dropdown.js].flat();

console.log(array)

Answer 2

Вы можете перебрать атрибуты и затем добавить элементы js в глобальный список следующим образом:

$(document).ready(function() {
               var components = {
                    mandatory: {
                              alert: {
                                   js: ['./bootstrap/js/alert.js'],
                                   css: [
                                        './bootstrap/css/alert.css',
                                        './bootstrap/css/alert2.css'
                                        ]
                              },
                              button: {
                                   js: ['./bootstrap/js/button.js'],
                                   css: ['./bootstrap/css/button.css']
                              },
                              dropdown: {
                                   js: ['./bootstrap/js/dropdown.js'],
                                   css: ['./bootstrap/css/dropdown.css']
                              }
                    },
                    optional: {
                         carousel: {
                              js: ['./bootstrap/js/carousel.js'],
                              css: ['./bootstrap/css/carousel.css']
                         },
                         modal: {
                              js: ['./bootstrap/js/modal.js'],
                              css: ['./bootstrap/css/modal.css']
                         }
                    }
               };
               let mandatory = components.mandatory;
               let list = [];
               for (var key in mandatory) {
                    if (mandatory.hasOwnProperty(key)) {
                         let current = mandatory[key]['js'];
                         if(current){
                              for(var i = 0; i < current.length; i++)
                                   list.push(current[i]);
                         }
                    }
               }
               console.log(list)
          })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Вы можете использовать for-in l oop:

for (const property in components.mandatory) {
  console.log(property.js);
}

Вы можете взять его отсюда.

Документация: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Answer 4

var result = []
Object.keys(components.mandatory).forEach(x => {
  components.mandatory[x].js.forEach(y => result.push(y));
})

Answer 5

Ну, так как другие ответили, не дожидаясь усилий со стороны ОП, позвольте мне высказать свое предложение:

const extractJs = components => 
  Object .values (components .mandatory) .flatMap (x => x .js)

const components = {mandatory: {alert: {js: ["./bootstrap/js/alert.js"], css: ["./bootstrap/css/alert.css", "./bootstrap/css/alert2.css"]}, button: {js: ["./bootstrap/js/button.js"], css: ["./bootstrap/css/button.css"]}, dropdown: {js: ["./bootstrap/js/dropdown.js"], css: ["./bootstrap/css/dropdown.css"]}}, optional: {carousel: {js: ["./bootstrap/js/carousel.js"], css: ["./bootstrap/css/carousel.css"]}, modal: {js: ["./bootstrap/js/modal.js"], css: ["./bootstrap/css/modal.css"]}}};

console .log (extractJs (components))

Сначала мы берем свойство mandatory, затем используем Object .values для извлечения значений каждого из его свойств. Мы flatMap над результирующими объектами, объединяя их .js свойства. Вызов flatMap сведет полученные массивы в единое целое.

Возможно, вы захотите добавить некоторые проверки по пути. Является ли components на самом деле объектом? , Есть ли у него свойство mandatory объекта? , et c. Я оставляю это тебе.