Поиск по TREE JSON

Question

Есть вот такой скрипт, который по поиску отбирает данные из сложного дерева Json. Но в итоговый массив new_arr попадает только один вариант поиска. Например, в JSON строке у меня есть два элемента test с разнымими ссылками - /page и /hello, но итоговый массив new_arr имеет только один найденный элемент с ссылкой /page. Как сделать так, чтобы все найденные элементы попадали в new_arr?

var treeData='[{"text":"Review","href":"\/","icon":"","target":"_self","page":""},{"text":"Methods","href":"","icon":"","target":"_self","page":"","children":[{"text":"test","href":"/page","icon":"","target":"_self","page":""}]},{"text":"test","href":"/hello","icon":"","target":"_self","page":""}]';

let TREE_DATA = $.parseJSON(treeData);
const findObj = (arr, idToFind) => {
  for (const item of arr) {
    if (item.text.search(new RegExp(idToFind)) != -1) return item;
    if (item.children) {
      const recursiveResult = findObj(item.children, idToFind);
      if (recursiveResult) return recursiveResult;
    }
  }
};

$(document).on('input', '#search_methods', function(e) {
    var text = $(this).val();
    var new_arr = [];
    var cString = findObj(TREE_DATA, text);
    new_arr.push(cString);
    console.log(new_arr);
    
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form class="nosubmit">
<input class="nosubmit form-control mb-3" id="search_methods" type="text" placeholder="Search...">
</form>

Answer 1

Делая вызов return - выходишь и из цикла и из функции. Поэтому остальные элементы и не просматриваются. Для решения, вместо return Достаточно просто складывать куда-то найденные элементы

var treeData = '[{"text":"Review","href":"\/","icon":"","target":"_self","page":""},{"text":"Methods","href":"","icon":"","target":"_self","page":"","children":[{"text":"test","href":"/page","icon":"","target":"_self","page":""}]},{"text":"test","href":"/hello","icon":"","target":"_self","page":""}]';

let TREE_DATA = $.parseJSON(treeData);
const findObj = (arr, idToFind, result = []) => {
  for (const item of arr) {
    if (item.text.search(new RegExp(idToFind)) != -1) result.push(item);
    if (item.children) {
      findObj(item.children, idToFind, result);
    }
  }
};

$(document).on('input', '#search_methods', function(e) {
  var text = $(this).val();
  var new_arr = []
  findObj(TREE_DATA, text, new_arr);
  console.log(new_arr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form class="nosubmit">
  <input class="nosubmit form-control mb-3" id="search_methods" type="text" placeholder="Search...">
</form>

Альтернативный вариант: воспользоваться генераторами

var treeData = '[{"text":"Review","href":"\/","icon":"","target":"_self","page":""},{"text":"Methods","href":"","icon":"","target":"_self","page":"","children":[{"text":"test","href":"/page","icon":"","target":"_self","page":""}]},{"text":"test","href":"/hello","icon":"","target":"_self","page":""}]';

let TREE_DATA = $.parseJSON(treeData);
const findObj = function* f(arr, idToFind) {
  for (const item of arr) {
    if (item.text.search(new RegExp(idToFind)) != -1) yield item;
    if (item.children) {
      yield* f(item.children, idToFind);
    }
  }
};

$(document).on('input', '#search_methods', function(e) {
  var text = $(this).val();
  var new_arr = [...findObj(TREE_DATA, text)];
  console.log(new_arr);

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<form class="nosubmit">
  <input class="nosubmit form-control mb-3" id="search_methods" type="text" placeholder="Search...">
</form>

БЛОГ НА HUSL

Поиск по TREE JSON

Ответы (1 шт):