如何从 javascript object 中获取名称和值到新列表中？

Question

I have this JavaScript object which is a collection of multiple lists(I believe). I need to create a select dropdown with the name being the name of the list, and a number of boxes with background color as per that name. Like this:

I am able to parse that object to get all the names of the colors, but I can't find a way to parse the names and the list of values it holds. This is how I tried:

var
    YlGn3 = ['#f7fcb9', '#addd8e', '#31a354'],
    YlGn4 = ['#ffffcc', '#c2e699', '#78c679', '#238443'],
    YlGn5 = ['#ffffcc', '#c2e699', '#78c679', '#31a354', '#006837'];

var brewer = Object.freeze({
    YlGn3: YlGn3,
    YlGn4: YlGn4
});

var office = Object.freeze({
    YlGn5: YlGn5
});

var colorschemes = {
    brewer: brewer,
    office: office
};

var scheme_list = [];

for (i in colorschemes){
 for(j in colorschemes[i]){
  console.log(j);
  scheme_list.push(j);
 }
}

I was thinking of creating a new object and append every color, along with the list of colors, so I can parse it again to create an option element with it. But, I am not able to figure out the best way to do that. Is this the correct approach?

Answer 1

You use Object.values along with forEach multiple times.

Object.values(colorschemes).forEach(obj=>Object.entries(obj).forEach(([name,colors])=>{
  const arr = [];
  colors.forEach(color=>arr.push(color));
  scheme_list.push([name, arr]);
}));

 var YlGn3 = ['#f7fcb9', '#addd8e', '#31a354'], YlGn4 = ['#ffffcc', '#c2e699', '#78c679', '#238443'], YlGn5 = ['#ffffcc', '#c2e699', '#78c679', '#31a354', '#006837']; var brewer = Object.freeze({ YlGn3: YlGn3, YlGn4: YlGn4 }); var office = Object.freeze({ YlGn5: YlGn5 }); var colorschemes = { brewer: brewer, office: office }; var scheme_list = []; Object.values(colorschemes).forEach(obj=>Object.entries(obj).forEach(([name,colors])=>{ const arr = []; colors.forEach(color=>arr.push(color)); scheme_list.push([name, arr]); })); console.log(scheme_list);