vue数组对象找出所有的属性问题

Question

数据格式如下

let data =  [
    {
        "key": "18",
        "path": "",
        "reactComponent": "",
        "children": [
            {
                "key": "233",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "18"
                ],
                "title": "首页统计",
                "meta": "{ \"icon\":\"product-cate\", \"url\":\"home\"}",
                "hasParent": true,
                "hasChildren": false
            }
        ],
        "parentIds": [],
        "title": "首页统计",
        "meta": "{ \"icon\":\"index\", \"url\":\"/home\"}",
        "hasParent": false,
        "hasChildren": false
    },
    {
        "key": "555",
        "path": "",
        "reactComponent": "",
        "children": [
            {
                "key": "556",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "555"
                ],
                "title": "客户管理",
                "meta": "{ \"icon\":\"客户管理\", \"url\":\"customerManage\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "557",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "555"
                ],
                "title": "客户分类",
                "meta": "{ \"icon\":\"客户分类\", \"url\":\"customerType\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "558",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "555"
                ],
                "title": "客户级别",
                "meta": "{ \"icon\":\"客户级别\", \"url\":\"customerLevel\" }",
                "hasParent": true,
                "hasChildren": false
            }
        ],
        "parentIds": [],
        "title": "客户管理",
        "meta": "{ \"icon\":\"客户管理\",  \"url\":\"/customer\"}",
        "hasParent": false,
        "hasChildren": false
    },
    {
        "key": "1",
        "path": "",
        "reactComponent": "",
        "children": [
            {
                "key": "228",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "1"
                ],
                "title": "商品规格",
                "meta": "{ \"icon\":\"商品规格\", \"url\":\"productSpecList\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "229",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "1"
                ],
                "title": "规格模板",
                "meta": "{ \"icon\":\"规格模板\", \"url\":\"productAttrTempList\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "198",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "1"
                ],
                "title": "商品管理",
                "meta": "{ \"icon\":\"商品管理\", \"url\":\"productManagement\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "199",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "1"
                ],
                "title": "商品分类",
                "meta": "{ \"icon\":\"商品分类\", \"url\":\"productCategory\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "195",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "1"
                ],
                "title": "计量单位",
                "meta": "{ \"icon\":\"计量单位\", \"url\":\"ProductMeasure\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "196",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "1"
                ],
                "title": "商品品牌",
                "meta": "{ \"icon\":\"商品品牌\", \"url\":\"productBrand\" }",
                "hasParent": true,
                "hasChildren": false
            }
        ],
        "parentIds": [],
        "title": "商品管理",
        "meta": "{ \"icon\":\"商品管理\",  \"url\":\"/pms\"}",
        "hasParent": false,
        "hasChildren": true
    },
    {
        "key": "333",
        "path": "",
        "reactComponent": "",
        "children": [
            {
                "key": "443",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "333"
                ],
                "title": "用户管理",
                "meta": "{ \"icon\":\"用户管理\", \"url\":\"userManage\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "444",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "333"
                ],
                "title": "角色管理",
                "meta": "{ \"icon\":\"角色管理\", \"url\":\"roleManage\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "448",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "333"
                ],
                "title": "商户管理",
                "meta": "{ \"icon\":\"商户管理\", \"url\":\"businessManagement\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "447",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "333"
                ],
                "title": "行政区划",
                "meta": "{ \"icon\":\"行政区划\", \"url\":\"administrative\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "670",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "333"
                ],
                "title": "配送中心",
                "meta": "{ \"icon\":\"配送中心\", \"url\":\"distributionCenter\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "981",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "333"
                ],
                "title": "权限管理",
                "meta": "{ \"icon\":\"权限管理\", \"url\":\"authZation\" }",
                "hasParent": true,
                "hasChildren": false
            }
        ],
        "parentIds": [],
        "title": "门户管理",
        "meta": "{ \"icon\":\"门户管理\", \"url\":\"/door\" }",
        "hasParent": true,
        "hasChildren": true
    },
    {
        "key": "666",
        "path": "",
        "reactComponent": "",
        "children": [
            {
                "key": "667",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "666"
                ],
                "title": "内容分类",
                "meta": "{ \"icon\":\"内容分类\", \"url\":\"noticeCategory\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "668",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "666"
                ],
                "title": "公告管理",
                "meta": "{ \"icon\":\"公告管理\", \"url\":\"noticeManage\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "669",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "666"
                ],
                "title": "新闻管理",
                "meta": "{ \"icon\":\"新闻管理\", \"url\":\"newsManage\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "449",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "666"
                ],
                "title": "帮助中心管理",
                "meta": "{ \"icon\":\"帮助中心管理\", \"url\":\"helpCenterManagement\" }",
                "hasParent": true,
                "hasChildren": false
            }
        ],
        "parentIds": [],
        "title": "内容管理",
        "meta": "{ \"icon\":\"内容管理\", \"url\":\"/内容管理\" }",
        "hasParent": true,
        "hasChildren": true
    },
    {
        "key": "33",
        "path": "",
        "reactComponent": "",
        "children": [
            {
                "key": "34",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "33"
                ],
                "title": "价格设置",
                "meta": "{ \"icon\":\"价格设置\", \"url\":\"priceSet\" }",
                "hasParent": true,
                "hasChildren": false
            },
            {
                "key": "35",
                "path": "",
                "reactComponent": "",
                "children": [],
                "parentIds": [
                    "33"
                ],
                "title": "价格表",
                "meta": "{ \"icon\":\"价格表\", \"url\":\"priceTable\" }",
                "hasParent": true,
                "hasChildren": false
            }
        ],
        "parentIds": [],
        "title": "价格管理",
        "meta": "{ \"icon\":\"价格管理\", \"url\":\"/priceSetting\" }",
        "hasParent": true,
        "hasChildren": true
    }
]

找出所有的meta并JSON.parse,求详细解释

Answer 1

使用递归。首先写一个找到第一层的meta，判断如果有children在找第2层的。