CODEWITHSUNDEEP
javascriptjquery
Ardi
Ardi

Reputation: 33

Get a list from javascript object

I am a new beginner in javascript and I am trying to figure out how to get a list from this object components.

I only need to select js keys from 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'],
    },
  },
};

So the result will be the selection of only the js keys:

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

I really appreciate your help.

Upvotes: 3

Views: 77

Answers (5)

Vivek Natarajan
Vivek Natarajan

Reputation: 389

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

Upvotes: 1

Scott Sauyet
Scott Sauyet

Reputation: 50797

Well, as others have answered without waiting for effort from the OP, let me throw my suggestion out there:

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))

We first take the mandatory property, then use Object .values to extract the values of each of its properties. We flatMap over the resulting objects, combining their .js properties. The flatMap call will flatten the resulting arrays into one as it goes.

You might want to add some checking along the way. Is components actually an object?, Does it have an object mandatory property?, etc. I leave that to you.

Upvotes: 1

Majed Badawi
Majed Badawi

Reputation: 28414

You can iterate over the attributes and then add the js elements to a global list as follows: 

$(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>

Upvotes: 2

Mukund Goel
Mukund Goel

Reputation: 599

Something like the below code should help you. Please try to understand how the below code is working.

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)

Upvotes: 2

Joe C.
Joe C.

Reputation: 461

You can use a for-in loop:

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

You can probably take it from here.

Documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

Upvotes: 2

Related Questions