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

如何获得菜单树？

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

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

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

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

手机 -> 智能手机 -> Apple -> some_model

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

手机 -> 智能手机_small_disp -> 三星 -> some_model 2

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

手机 -> 智能手机_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,
            )
        )
    )
)

标签： javascriptjqueryjson

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);