Get a list from javascript object

Question

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.

Have you tried anything yourself so far? How would you go about getting the mandatory element? Then how would you find the values of all the objects inside it? Then how would you take their js properties? And if you're left with a nested array, how would you flatten it into your requested structure? — Scott Sauyet
– Scott Sauyet, Commented Apr 14, 2020 at 19:53

Joe C. · Accepted Answer · 2020-04-14 19:55:56Z

2

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

answered Apr 14, 2020 at 19:55

Joe C.

5019 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Sauyet Over a year ago

... but the OP was looking for a solution that returns an array of the results.

Mukund Goel · Accepted Answer · 2020-04-14 19:56:14Z

2

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)

answered Apr 14, 2020 at 19:56

Mukund Goel

5993 silver badges12 bronze badges

3 Comments

Scott Sauyet Over a year ago

And what if the list of properties inside mandatory was dynamic, and this is just one example?

Mukund Goel Over a year ago

OP can modify the solution above to suit his/her needs. Good learning experience rather than copying an answer from Stack Overflow!

Scott Sauyet Over a year ago

Sure, but my point was that this solution, unlike the other two presented so far, makes an unnecessary assumption about the shape of the data.

Majed Badawi · Accepted Answer · 2020-04-14 19:57:11Z

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>

Scott Sauyet · Accepted Answer · 2020-04-14 20:02:56Z

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.

Vivek Natarajan · Accepted Answer · 2020-04-14 20:09:07Z

1

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

answered Apr 14, 2020 at 20:09

Vivek Natarajan

3893 silver badges9 bronze badges

1 Comment

Scott Sauyet Over a year ago

Why not use Object.values instead?

Collectives™ on Stack Overflow

Get a list from javascript object

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related