Question

我有一个表示菜单的JSON树视图：

var menus = [
  {
    label : "1",
    items: [
      {
        label : "1.1"
      },
      {
        label : "1.2",
        items : [
          {
            label : "1.2.1"
          },
          {
            label : "1.2.2"
          }
        ]
      },
      {
        label : "1.3"
      },
    ]
  },
  {
    label : "2"
  }
]

我想通过为每个项目添加一个 selected 属性来对该JSON进行更改。如果 label 是正确的，则此属性（布尔值）将设置为 true ；如果后代是正确的那个。例如，如果我正在寻找 label 1.2，则将选择所有标签1和1.2。所以我会得到这个JSON：

var menus = [
  {
    label : "1",
    selected : true,
    items: [
      {
        label : "1.1"
        selected : false
      },
      {
        label : "1.2",
        selected : true,
        items : [
          {
            label : "1.2.1"
            selected : false
          },
          {
            label : "1.2.2",
            selected : false
          }
        ]
      },
      {
        label : "1.3",
        selected : false
      },
    ]
  },
  {
    label : "2",
    selected : false
  }
]

selected : false不是必需的。 Lodash对我来说还行；）！

有什么建议吗？

edit：我在哪里！ -> https://codepen.io/anon/pen/XGoXjM?editors=0010

edit 2：查找元素一定不能基于我写标签的方式。标签可以是任何字符串...对不起...

谢谢

Answer 1

此解决方案使用for循环递归地迭代菜单项及其子项。如果某项是selected，则将selected: true添加到该项及其父项：

const selectMenuItems = menus => selectedLabel => {  
  const internal = arr => {
    let selected = false

    for(let i = 0; i < arr.length; i++) {
      const item = arr[i]
      const childrenSelected = !!item.items && internal(item.items)
      item.selected = childrenSelected || item.label === selectedLabel
      selected = selected || item.selected
    }
    
    return selected
  }
  
  internal(menus)
  
  return menus
}

const menus = [{"label":"1","items":[{"label":"1.1"},{"label":"1.2","items":[{"label":"1.2.1"},{"label":"1.2.2"}]},{"label":"1.3"}]},{"label":"2"}]

const menuSelector = selectMenuItems(menus)

const result = menuSelector('1.2')

console.log(result)

.as-console-wrapper { top: 0; max-height: 100% !important; }

Answer 2

您可以使用一些递归方法来实现此目的。

let str = '1.2.1';


function checkItem(arr, strArr) {
  // iterate over the array
  arr.forEach((obj) => {
    // set selected property based on matching every digit in label in same order
    // if digits would be single then you can use startsWith and no need to split string
    obj.selected = obj.label.split('.').every((it, i) => it === strArr[i]);
    // if nested item is there then call recursively
    obj.items && checkItem(obj.items, strArr);
  });
  return arr;
}

checkItem(menus, str.split('.'));

var menus = [{
    label: "1",
    items: [{
        label: "1.1"
      },
      {
        label: "1.2",
        items: [{
            label: "1.2.1"
          },
          {
            label: "1.2.2"
          }
        ]
      },
      {
        label: "1.3"
      },
    ]
  },
  {
    label: "2"
  }
];



let str = '1.2.1';


function checkItem(arr, strArr) {
  arr.forEach((obj) => {
    obj.selected = obj.label.split('.').every((it, i) => it === strArr[i]);
    obj.items && checkItem(obj.items, strArr);
  });
  return arr;
}

checkItem(menus, str.split('.'));


console.log(menus);

UPADATE：：由于要完全独立于标签来更新选定的属性，因此可以执行以下操作。我想你想根据数组中的位置进行更新。

let str = '1.2.1';


function checkItem(arr, prefixArray, strArr) {
  // iterate over the array
  arr.forEach((obj, i) => {
    // generate new prefix array for checking
    let pa = [...prefixArray, i + 1];
    // compare prefix array with the string array to check matches
    obj.selected = pa.every((it, i) => it == strArr[i]);
    // if items defined do it recursively
    obj.items && checkItem(obj.items, pa, strArr);
  });
  return arr;
}

checkItem(menus,[], str.split('.'));

var menus = [{
    label: "1",
    items: [{
        label: "1.1"
      },
      {
        label: "1.2",
        items: [{
            label: "1.2.1"
          },
          {
            label: "1.2.2"
          }
        ]
      },
      {
        label: "1.3"
      },
    ]
  },
  {
    label: "2"
  }
];



let str = '1.2.1';


function checkItem(arr, prefixArray, strArr) {
  arr.forEach((obj, i) => {
    let pa = [...prefixArray, i + 1];
    obj.selected = pa.every((it, i) => it == strArr[i]);
    obj.items && checkItem(obj.items, pa, strArr);
  });
  return arr;
}

checkItem(menus,[], str.split('.'));


console.log(menus);

Answer 3

我只是这样检查标签：

var menus = [{
        label: "1",
        items: [{
                label: "1.1"
            },
            {
                label: "1.2",
                items: [{
                        label: "1.2.1"
                    },
                    {
                        label: "1.2.2"
                    }
                ]
            },
            {
                label: "1.3"
            },
        ]
    },
    {
        label: "2"
    }
];

var checkSelected = function(items, search) {
    for (var key in items) {
        items[key].selected = search.startsWith(items[key].label) && items[key].label.length<=search.length;
        if (items[key].items) {
            checkSelected(items[key].items, search);
        };
    };
};

var test = "1.2";
checkSelected(menus, test);
console.log(menus);

也在JSFiddle上。

startsWith（）方法确定字符串是否以指定字符串的字符，返回true或false为合适的。

quoted from here

带有嵌套项目的树json“菜单”：检查“分支”

3 个答案: