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

Question

我有这个 JavaScript 对象，它是多个列表的集合（我相信）。我需要创建一个名称为列表名称的选择下拉列表，以及许多具有该名称背景颜色的框。像这样：

我能够解析该对象以获取所有颜色的名称，但我找不到解析名称和它所包含的值列表的方法。这就是我尝试的方式：

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

我正在考虑创建一个新对象并附加每种颜色以及颜色列表，因此我可以再次解析它以使用它创建一个选项元素。但是，我无法找出最好的方法来做到这一点。这是正确的做法吗？

Answer 1

您多次使用Object.values 和forEach。

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