从JS上的JSON对象递归创建树菜单

Question

[
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"Sony",
        "Model":"Some_model_acd",
    },
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"Sony",
        "Model":"Some_model_bcd",
    },
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"LG",
        "Model":"Some_model_zcd",
    }, 
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"LG",
        "Model":"Some_model_bcd",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones",
        "brand_name":"Apple",
        "Model":"some_model",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones_small_disp",
        "brand_name":"Apple",
        "Model":"some_model 1",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones_small_disp",
        "brand_name":"Samsung",
        "Model":"some_model 2",
    }, 
    {
        "type": "phones",
        "product_cat": "smartphones_large_disp",
        "brand_name":"Apple",
        "Model":"some_model 3",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones_large_disp",
        "brand_name":"Samsung",
        "Model":"some_model 4",
    },
]

如何获得菜单树？

技术 ->电视 -> sony-> some_model_acd

技术 ->电视 -> sony-> some_model_bcd

技术 ->电视 -> lg-> some_model_bcd

技术 ->电视 -> lg-> some_model_zcd

手机 ->智能手机 ->苹果 -> some_model

手机 ->智能手机_small_disp->苹果 -> some_model 1

电话 ->智能手机_small_disp-> samsung-> some_model 2

手机 ->智能手机_large_disp->苹果 -> some_model 3

电话 ->智能手机_large_disp-> samsung-> some_model 4

我需要具有层次结构或HTML菜单代码的数组或对象。在PHP上输出：

Array (
    ['technic'] =>  Array (
        ['TV'] =>   Array (
            ['Sony']  => Array (
                [0]  => Some_model_acd,
                [1]  => Some_model_bcd
            ),
            ['LG']  => Array (
                [0]  => Some_model_zcd,
                [1]  => Some_model_bcd
            )
        )
    ),
    ['phones'] =>   Array (
        ['smartphones'] =>  Array (
            ['Apple']  => Array (
                [0]  => some_model
            )
        ),
        ['smartphones_small_disp'] =>   Array (
            ['Apple']  => Array (
                [0]  => some_model 1,
            ),
            ['Samsung']  => Array (
                [0]  => some_model 2,
            )
        ),
        ['smartphones_large_disp'] =>   Array (
            ['Apple']  => Array (
                [0]  => some_model 3,
            ),
            ['Samsung']  => Array (
                [0]  => some_model 4,
            )
        )
    )
)

Answer 1

您可以在不递归的情况下执行此操作，而是使用.reduce()。通过使用.reduce()，您可以根据属性创建嵌套对象，并将所需的Models添加到您的数组中。

请参阅下面的示例：

const arr = [{type:"technic",product_cat:"TV",brand_name:"Sony",Model:"Some_model_acd"},{type:"technic",product_cat:"TV",brand_name:"Sony",Model:"Some_model_bcd"},{type:"technic",product_cat:"TV",brand_name:"LG",Model:"Some_model_zcd"},{type:"technic",product_cat:"TV",brand_name:"LG",Model:"Some_model_bcd"},{type:"phones",product_cat:"smartphones",brand_name:"Apple",Model:"some_model"},{type:"phones",product_cat:"smartphones_small_disp",brand_name:"Apple",Model:"some_model 1"},{type:"phones",product_cat:"smartphones_small_disp",brand_name:"Samsung",Model:"some_model 2"},{type:"phones",product_cat:"smartphones_large_disp",brand_name:"Apple",Model:"some_model 3"},{type:"phones",product_cat:"smartphones_large_disp",brand_name:"Samsung",Model:"some_model 4"}];
const menu_tree = arr.reduce((a, {type, product_cat, brand_name, Model}) => {
  a[type] = (a[type] || {});
  a[type][product_cat] = (a[type][product_cat] || {});
  const x = a[type][product_cat][brand_name];
  a[type][product_cat][brand_name] = x ? [...x, Model] : [Model];
  return a;
}, {});
console.log(menu_tree);

Answer 2

您可以参考此

var data = [
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"Sony",
        "Model":"Some_model_acd",
    },
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"Sony",
        "Model":"Some_model_bcd",
    },
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"LG",
        "Model":"Some_model_zcd",
    }, 
    {
        "type": "technic",
        "product_cat": "TV",
        "brand_name":"LG",
        "Model":"Some_model_bcd",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones",
        "brand_name":"Apple",
        "Model":"some_model",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones_small_disp",
        "brand_name":"Apple",
        "Model":"some_model 1",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones_small_disp",
        "brand_name":"Samsung",
        "Model":"some_model 2",
    }, 
    {
        "type": "phones",
        "product_cat": "smartphones_large_disp",
        "brand_name":"Apple",
        "Model":"some_model 3",
    },  
    {
        "type": "phones",
        "product_cat": "smartphones_large_disp",
        "brand_name":"Samsung",
        "Model":"some_model 4",
    },
]
for(var i = 0; i < data.length ; i++){
  
  console.log(data[i].type + " -> "+data[i].product_cat+ " -> "+data[i].brand_name+ " -> "+data[i].Model)
}