使用陣列陣列中的子項創建嵌套物件

我有以下陣列陣列

let arr = [
    [ "Female" , "Male" ],
    [ "Dinner" , "Lunch" ],
    [ "No" , "Yes" ],
]

我想實作這種結構

let foo = [
    { 
        value: "Female",
        children: [
            {
                value: "Dinner",
                children: [
                    {
                        value: "No"
                    },
                    {
                        value: "Yes"
                    },
                ]
            },
            {
                value: "Lunch",
                children: [
                    {
                        value: "No"
                    },
                    {
                        value: "Yes"
                    },
                ]
             },
        ]
    },
    { 
        value: "Male",
        children: [
            {
                value: "Dinner",
                children: [
                    {
                        value: "No"
                    },
                    {
                        value: "Yes"
                    },
                ]
            },
            {
                value: "Lunch",
                children: [
                    {
                        value: "No"
                    },
                    {
                        value: "Yes"
                    },
                ]
             },
        ]
    },
]

我根本無法解決這個問題來實作這一目標，因此，我沒有要發布的起始代碼，所以如果您能提供幫助，那就太好了。

uj5u.com熱心網友回復：

你也可以不用遞回 2 for

let arr = [
    [ "Female" , "Male" ],
    [ "Dinner" , "Lunch" ],
    [ "No" , "Yes" ],
];

var lastChild = -1;

for(var i = arr.length-1; i >= 0; i--) {
  var item = arr[i];
  var lastChildTemp = [];
  for(var j = 0; j < item.length; j  ) {
    var newChild = {value: item[j]};
    if(lastChild != -1) {
      newChild.children = lastChild;
    }
    lastChildTemp.push(newChild);
  }
  lastChild = lastChildTemp;
}

console.log(JSON.stringify(lastChildTemp,null,2));

輸出：

[
  {
    "value": "Female",
    "children": [
      {
        "value": "Dinner",
        "children": [
          {
            "value": "No"
          },
          {
            "value": "Yes"
          }
        ]
      },
      {
        "value": "Lunch",
        "children": [
          {
            "value": "No"
          },
          {
            "value": "Yes"
          }
        ]
      }
    ]
  },
  {
    "value": "Male",
    "children": [
      {
        "value": "Dinner",
        "children": [
          {
            "value": "No"
          },
          {
            "value": "Yes"
          }
        ]
      },
      {
        "value": "Lunch",
        "children": [
          {
            "value": "No"
          },
          {
            "value": "Yes"
          }
        ]
      }
    ]
  }
]

這里的關鍵是使用backward for（從高索引到低索引），然后創建一個lastChild物件。然后把它放在.children每個下一個物件的屬性中。

uj5u.com熱心網友回復：

你可以試試這個：

let arr = [
  ['Female', 'Male'],
  ['Dinner', 'Lunch'],
  ['No', 'Yes']
]

function makeTree(a, ch = [], currIndex = 0) {
  for (const item of a[currIndex]) {

    if (a[currIndex   1]) {
      // If there is an array after this one then 
      // include the 'children' array
      const obj = { value: item, children: [] }
      ch.push(obj)

      // Run the function again to fill the `children` 
      // array with the values of the next array
      makeTree(a, obj.children, currIndex   1)

    } else {
      // If this is the last array then
      // just include the value 
      ch.push({ value: item })
    }
  }

  return ch
}

const result = makeTree(arr)
console.log(JSON.stringify(result, null, 2))

.as-console-wrapper { min-height: 100% }

uj5u.com熱心網友回復：

簽出此代碼片段。它根據您的需要輸出。

let arr = [
    [ "Female" , "Male" ],
    [ "Dinner" , "Lunch" ],
    [ "No" , "Yes" ],
]

let foo = [];


let arr2 = [];
arr[2].forEach(yn => {  
    arr2.push({ "value": yn});
});

let arr1 = [];
arr[1].forEach(dl => {
    arr1.push({
        "value": dl,
        "children": arr2
    }); 
});

arr[0].forEach(fm => {
    foo.push({
        "value": fm,
        "children": arr1
    }); 
});     

console.log(JSON.stringify(foo, null, 2))

uj5u.com熱心網友回復：

使用下面的代碼重新排列你的陣列，然后按照你的意愿進行迭代，這是動態的。您可以在 arr 變數中有更多行。

let arr = [
 [ "Female" , "Male" ],
 [ "Dinner" , "Lunch" ],
 [ "No" , "Yes" ],
] 
let finalArray = [];
for(let i=arr.length-2; i>-1; i--){
  for(let j=0; j< arr[i].length; j  ) {
    item = {}
    item[arr[i][j]] = arr[i 1];
    arr[i][j] = [];
    arr[i][j] = item;
  }
arr.pop();
}
console.log(arr);
/*output*/
[
[{
    'Female': [{
        'Dinner': ['No', 'Yes']
    }, {
        'Lunch': ['No', 'Yes']
    }]
}, {
    'Male': [{
        'Dinner': ['No', 'Yes']
    }, {
        'Lunch': ['No', 'Yes']
    }]
  }]
]

https://jsfiddle.net/Frangly/ywsL0pbt/147/

標籤：javascript 数组 递归 数据结构

上一篇：如何將“帶換行符的字串資料”決議為JSON物件？

下一篇：使用正則運算式匹配深層嵌套元素HTML