首页 > 解决方案 > 如何在 javascript/vuejs 中从孩子的 Id 中过滤父 json

问题描述

所以我有这个json。

{
    "account_owner": "",
    "account_type": "",
    "nest_uid": "17_15_1536914882_yhHDzQsDSI",
    "business_name": "",
    "sync_block": false,
    "validation": {
        "isError": false,
        "inputList": [],
        "message": ""
    },
    "is_selected": true,
    "contacts": [{
            "con_title": "",
            "con_fName": "",
            "con_lName": "",
            "con_job_title": "",
            "is_selected": true,
            "emails": [{
                "email": "",
                "type": "",
                "primary": false,
                "is_selected": true,
                "nest_uid": "17_15_1536914882_yhHDzQsDSK",
                "validation": {
                    "isError": false,
                    "inputList": [],
                    "message": "",
                    "is_selected": true
                },
                "checked": false
            }],
            "phones": [{
                "phone": "",
                "type": "",
                "primary": false,
                "is_selected": true,
                "nest_uid": "17_15_1536914882_uHN38SxJ3s",
                "validation": {
                    "isError": false,
                    "inputList": [],
                    "is_selected": true,
                    "message": ""
                },
                "checked": false
            }],
            "nest_uid": "17_15_1536914882_hwzB7dIn9v",
            "checked": false
        },
        {
            "con_title": "",
            "con_fName": "",
            "con_lName": "",
            "con_job_title": "",
            "is_selected": true,
            "emails": [{
                "email": "",
                "type": "",
                "primary": false,
                "is_selected": true,
                "nest_uid": "17_15_1536914882_yhHDzQsDSx",
                "validation": {
                    "isError": false,
                    "is_selected": true,
                    "inputList": [],
                    "message": ""
                },
                "checked": false
            }],
            "phones": [{
                "phone": "",
                "type": "",
                "primary": false,
                "is_selected": true,
                "nest_uid": "17_15_1536914882_uHN38SxJ3Y",
                "validation": {
                    "isError": false,
                    "is_selected": true,
                    "inputList": [],
                    "message": ""
                },
                "checked": false
            }],
            "nest_uid": "17_15_1536914882_hwzB7dIn9x",
            "checked": false
        }
    ]
}

你可以看到每一层都有两个属性

  1. nest_uid

  2. is_selected

现在我得到了子元素的nest_uid,所以我需要将所有元素标记is_selected为 false,除了选中的元素和它的元素。

例如

如果nest_id = '17_15_1536914882_yhHDzQsDSK'

输出

{
    "account_owner": "",
    "account_type": "",
    "nest_uid": "17_15_1536914882_yhHDzQsDSI",
    "business_name": "",
    "sync_block": false,
    "validation": {
        "isError": false,
        "inputList": [],
        "message": ""
    },
    "is_selected": true,//here
    "contacts": [{
            "con_title": "",
            "con_fName": "",
            "con_lName": "",
            "con_job_title": "",
            "is_selected": true, //here 
            "emails": [{
                "email": "",
                "type": "",
                "primary": false,
                "is_selected": true,
                "nest_uid": "17_15_1536914882_yhHDzQsDSK", //here
                "validation": {
                    "isError": false,
                    "inputList": [],
                    "message": "",
                    "is_selected": true
                },
                "checked": false
            }],
            "phones": [{
                "phone": "",
                "type": "",
                "primary": false,
                "is_selected": false,
                "nest_uid": "17_15_1536914882_uHN38SxJ3s",
                "validation": {
                    "isError": false,
                    "inputList": [],
                    "is_selected": true,
                    "message": ""
                },
                "checked": false
            }],
            "nest_uid": "17_15_1536914882_hwzB7dIn9v",
            "checked": false
        },
        {
            "con_title": "",
            "con_fName": "",
            "con_lName": "",
            "con_job_title": "",
            "is_selected": false,
            "emails": [{
                "email": "",
                "type": "",
                "primary": false,
                "is_selected": false,
                "nest_uid": "17_15_1536914882_yhHDzQsDSx",
                "validation": {
                    "isError": false,
                    "is_selected": false,
                    "inputList": [],
                    "message": ""
                },
                "checked": false
            }],
            "phones": [{
                "phone": "",
                "type": "",
                "primary": false,
                "is_selected": false,
                "nest_uid": "17_15_1536914882_uHN38SxJ3Y",
                "validation": {
                    "isError": false,
                    "is_selected": false,
                    "inputList": [],
                    "message": ""
                },
                "checked": false
            }],
            "nest_uid": "17_15_1536914882_hwzB7dIn9x",
            "checked": false
        }
    ]
}

标签: javascriptnode.jsvuejs2

解决方案


递归确实是这里的答案。像这样的东西应该可以工作,即使它不是最漂亮的:

function selectInJSON(uid, current) {
  current.is_selected = current.nest_uid === uid

  Object.values(current).forEach((child) => {
      if (Array.isArray(child)) {
        child.forEach((item) => {
          selectInJSON(uid, item)
          if (item.is_selected) current.is_selected = true
        })
      }
      else if (Object(child) === child) {
        selectInJSON(uid, child)
        if (child.is_selected) current.is_selected = true
      }
  })
}

推荐阅读