使用 Lodash 从 JSON 数据创建导航栏菜单

Question

我正在尝试从 JSON 数据创建导航栏菜单。实际上我已经实现了它，但我正在寻找反馈不要打电话getItems两次？如何改进我的代码？

谢谢

var _ = require('lodash');

let menuConfig = [

    {

        ID: 1,

        TAG: "M:A",

        PARENT_TAG: "MAIN",

        TITLE: "A Title"

    },

    {

        ID: 2,

        TAG: "AS1",

        PARENT_TAG: "M:A",

        TITLE: "A Subtitle 1"

    },

    {

        ID: 3,

        TAG: "AS2",

        PARENT_TAG: "M:A",

        TITLE: "A Subtitle 2"

    },

    {

        ID: 4,

        TAG: "AS3",

        PARENT_TAG: "M:A",

        TITLE: "A Subtitle 3"

    },

    {

        ID: 5,

        TAG: "M:B",

        PARENT_TAG: "MAIN",

        TITLE: "B Title"

    },

    {

        ID: 6,

        TAG: "BS1",

        PARENT_TAG: "M:B",

        TITLE: "B Subtitle 1"

    },

    {

        ID: 7,

        TAG: "BS2",

        PARENT_TAG: "M:B",

        TITLE: "B Subtitle 2"

    },

    {

        ID: 8,

        TAG: "M:C",

        PARENT_TAG: "MAIN",

        TITLE: "C Title"

    },

    {

        ID: 8,

        TAG: "CS1",

        PARENT_TAG: "M:C",

        TITLE: "C Subtitle 1"

    }

]

function getMenu() {

    let grouped = _.groupBy(menuConfig, "PARENT_TAG");

    let menu = getItems(grouped.MAIN, grouped);

    console.log(JSON.stringify(menu, null, 3));

}

function getItems(items, grouped) {

    let subMenu = [];

    _.forEach(items, (item) => {

        let newItem = getItem(item, grouped)

        if (newItem) {

            subMenu.push(newItem);

        }

    });

    return subMenu;

}

function getItem(item, grouped) {

    if (grouped[item.TAG]) {

        let subMenu = getItems(grouped[item.TAG], grouped);

        if (subMenu && subMenu.length) {

            return {

                title: item.TITLE,

                subMenu: subMenu

            }

        }

    } else {

        let newItem = {

            title: item.TITLE

        }

        return newItem;

    }

}

getMenu();

输出需要是这样的；

[

  {

    "title": "A Title",

    "subMenu": [

      {

        "title": "A Subtitle 1"

      },

      {

        "title": "A Subtitle 2"

      },

      {

        "title": "A Subtitle 3"

      }

    ]

  },

 

Answer 1

这是另一个解决方案reduce：const menuConfig = [{  ID: 1,TAG: "M:A", PARENT_TAG: "MAIN", TITLE: "A Title"}, {  ID: 2, TAG: "AS1", PARENT_TAG: "M:A", TITLE: "A Subtitle 1"}, {  ID: 3, TAG: "AS2", PARENT_TAG: "M:A", TITLE: "A Subtitle 2"}, {  ID: 4, TAG: "AS3", PARENT_TAG: "M:A", TITLE: "A Subtitle 3"}, {  ID: 5, TAG: "M:B", PARENT_TAG: "MAIN", TITLE: "B Title"}, {  ID: 6, TAG: "BS1", PARENT_TAG: "M:B", TITLE: "B Subtitle 1"}, {  ID: 7, TAG: "BS2", PARENT_TAG: "M:B", TITLE: "B Subtitle 2"}, {  ID: 8, TAG: "M:C", PARENT_TAG: "MAIN", TITLE: "C Title"}, {  ID: 8, TAG: "CS1", PARENT_TAG: "M:C", TITLE: "C Subtitle 1"}]function getMenu() {  const menu = getItems(menuConfig, 'MAIN');  console.log(menu);}function getItems(items, grandParentTag) {  const newItems = items.reduce((modifiedObj, currentItem) => {    const parentTag = currentItem.PARENT_TAG;    const tag = currentItem.TAG;    if (!modifiedObj[grandParentTag]) {      modifiedObj[parentTag] = {};    }    if (!modifiedObj[grandParentTag][parentTag]) {      modifiedObj[parentTag][tag] = {        title: currentItem.TITLE,        subMenu: [],      };    } else {      modifiedObj[grandParentTag][parentTag].subMenu.push({        title: currentItem.TITLE,      });    }    return modifiedObj;  }, {});  return Object.values(newItems[grandParentTag]);}getMenu();