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",
    },
]

如何获得菜单树？

技术->电视->索尼-> Some_model_acd

技术->电视->索尼-> Some_model_bcd

技术->电视-> LG-> Some_model_bcd

技术->电视-> LG-> Some_model_zcd

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

电话-> Smartphones_small_disp->苹果-> some_model 1

电话-> Smartphones_small_disp->三星-> some_model 2

电话-> Smartphones_large_disp->苹果-> some_model 3

电话-> Smartphones_large_disp->三星-> 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)
}

从js上的json对象递归创建树菜单

2 个答案: