Javascript 循环访问嵌套对象并创建 Select 下拉列表和对象列表

Question

我有这个 javascript 对象 data 通过。我想为 "Object One" 和 "Object Two" 创建一个 select 下拉列表，并在 DOM 上显示列表，如下所示：VW、Red、GTI、2018 等等将它们分组在 "Object One" 或 "Object Two" 下，以便可以通过 select 下拉列表相应地显示。

但是，由于递归，我很难循环访问它们。我是新手 Javascript.

var data =
{
    "object": {"object": "sometext"},
    "group": {
        "Object One": {
            "VW": {            
              "color":"red",
              "model":"GTI",
              "year":"2018"
            },
            "Audi": {
                "color":"black",
                "model":"Q5",
                "year":"2017"
            }
        },
        "Object Two": {
            "Toyota": {
                "color":"silver",
                "model":"Fit",
                "year":"2017"
            },
            "Nissan": {
                "color":"Red",
                "model":"Cube",
                "year":"2018"
            }
        }
    }
};

Output should be:
[Object One] -- Shows the lists below accordingly

//Lists for Object One//
VW   red    GTI    2018
Audi black  Q5     2017

Answer 1

希望对您有所帮助。请稍微清除一下代码。

const data =
{
    "object": {"object": "sometext"},
    "group": {
        "Object One": {
            "VW": {            
              "color":"red",
              "model":"GTI",
              "year":"2018"
            },
            "Audi": {
                "color":"black",
                "model":"Q5",
                "year":"2017"
            }
        },
        "Object Two": {
            "Toyota": {
                "color":"silver",
                "model":"Fit",
                "year":"2017"
            },
            "Nissan": {
                "color":"Red",
                "model":"Cube",
                "year":"2018"
            }
        }
    }
};

function transferData(data) {
  let string = '';
  Object.keys(data.group).forEach(groupName => {
    string += `[${groupName}] -- Shows the lists below accordingly\n`;
    Object.keys(data.group[groupName]).forEach(brand => {
      string += `${brand}  ${data.group[groupName][brand].color}  ${data.group[groupName][brand].model}  ${data.group[groupName][brand].year} \n`
    });
  });
  return string;
}

console.log(transferData(data));

Javascript 循环访问嵌套对象并创建 Select 下拉列表和对象列表

Javascript Loop and Access Nested Object and Create Select Dropdown and Lists of Objects

javascript

select

loops

object

nested-loops