使用 JavaScript 展平深度嵌套的对象

Question

我有一个包含三重嵌套对象的对象。我想展平对象以清楚地查看值并放置在 HTML.

中

{
    "templateName": "Test template",
    "assignmentGroup": "Test template",
    "fields": [{
        "type": "Multi Select dropdown",
        "entry": [{
            "checked": false,
            "value": "govtBusinses",
            "displayValue": "Government Business Division"
        }, {
            "checked": true,
            "value": "privateSector",
            "displayValue": "Private Sector"
        }, {
            "checked": true,
            "value": "publicSector",   
            "displayValue": "Public Sector"
        }]
    }, {
        "type": "Text Field",
        "entry": null
    }]
}

我试过压缩它，但我希望它是我想要的格式。

flattenObject = function(ob) {
        let toReturn = {};
        for (let i in ob) {
            if (!ob.hasOwnProperty(i)) {
                continue;
            }
            if ((typeof ob[i]) === "object") {
                let flatObject = this.flattenObject(ob[i]);
                for (let x in flatObject) {
                    if (!flatObject.hasOwnProperty(x)) {
                        continue;
                    }
                    toReturn[i + "." + x] = flatObject[x];
                }
            } else {
                toReturn[i] = ob[i];
            }
        }
        console.log(toReturn);
        return toReturn;
    };

预计：

TemplateName  : "Test template"
Assignment Group : "sample"
Field 0 :
Type : Multiselect dropdown
Entry 0 :
checked : false
value : 
buisness: 
Entry 1:
checked : false
value : 
buisness: 
Field 1:
Type: 
.......

我怎样才能做到这一点？

Answer 1

对象中的同一个键不能有不同的值。我想实现这一目标的更好方法是 return 对象数组。

试试这个：

let obj = {
  "templateName": "Test template",
  "assignmentGroup": "Test template",
  "fields": [{
    "type": "Multi Select dropdown",
    "entry": [{
      "checked": false,
      "value": "govtBusinses",
      "displayValue": "Government Business Division"
    }, {
      "checked": true,
      "value": "privateSector",
      "displayValue": "Private Sector"
    }, {
      "checked": true,
      "value": "publicSector",
      "displayValue": "Public Sector"
    }]
  }, {
    "type": "Text Field",
    "entry": null
  }]
}

let fieldsCount = []

flattenObject = function(ob, toReturnArr) {
  for (let i in ob) {
    if (!ob.hasOwnProperty(i)) {
      continue;
    }
    if ((typeof ob[i]) === "object") {
      if (isNaN(i)) {
        fieldsCount[i] = fieldsCount[i] === undefined ? 0 : fieldsCount[i] + 1
        ob[i] && ob[i].length ? console.log(`${i}: ${fieldsCount[i]}`) : null;
      }
      toReturnArr = this.flattenObject(ob[i], toReturnArr);
    } else {
      console.log(`${i}: ${ob[i]}`);
      toReturnArr.push({
        [i]: ob[i]
      })
    }
  }
  return toReturnArr;
};

flattenObject(obj, [])

结果：

templateName: Test template
assignmentGroup: Test template
fields: 0
type: Multi Select dropdown
entry: 0
checked: false
value: govtBusinses
displayValue: Government Business Division
checked: true
value: privateSector
displayValue: Private Sector
checked: true
value: publicSector
displayValue: Public Sector
type: Text Field

PS: {[key]: object[key]} 像 [key] 这样使用变量作为键值是 ES6 的特性。

使用 JavaScript 展平深度嵌套的对象

Flatten a deeply nested object using JavaScript

javascript

arrays

flatten