Method for sorting a tree structure based on the titles and descriptions of items, while displaying the corresponding parent nodes

I am currently working with treeview data that looks like this:

  [  
    {  
      "id":132,
      "parent_id":0,
      "title":"Item 1",
      "description":"",
      "nodes":[  
        {  
          "id":133,
          "parent_id":132,
          "title":"Item 1.1",
          "description":"",
          "nodes":[  
            {  
              "id":134,
              "parent_id":133,
              "title":"Item 1.1.1",
              "description":"",
              "nodes":[],        
            }
          ]
        }
      ]
    },
    {
      "id":135,
      "parent_id":0,
      "title":"Item 2",
      "description":"",
      "nodes":[  ]
    },
    { 
      "id":136,
      "parent_id":0,
      "title":"Item 3",
      "description":"",
      "nodes":[ 
        { 
          "id":137,
          "parent_id":136,
          "title":"Item 3.1",
          "description":"",
          "nodes":[ ]    
        }
      ]
    }
  ]

My goal is to filter the data based on both Title and Description in all children values, and if a matching child value is found, display all its parent items according to the hierarchy.

I have attempted to achieve this using the following code snippet, but it only filters by the title of the first parent item:

   this.visible = function (item) {
    return !(this.query && this.query.length > 0 &&
      item.title.indexOf(this.query) == -1);
   };
javascriptjsonalgorithmtreeview

Answer №1

How about this approach?

var elements =   [  
  {  
    "id":132,
    "parent_id":0,
    "title":"Element 1",
    "description":"",
    "nodes":[  
      {  
        "id":133,
        "parent_id":132,
        "title":"Element 1.1",
        "description":"",
        "nodes":[  
          {  
            "id":134,
            "parent_id":133,
            "title":"Element 1.1.1",
            "description":"",
            "nodes":[],        
          }
        ]
      }
    ]
  },
  {
    "id":135,
    "parent_id":0,
    "title":"Element 2",
    "description":"",
    "nodes":[  ]
  },
  { 
    "id":136,
    "parent_id":0,
    "title":"Element 3",
    "description":"",
    "nodes":[ 
      { 
        "id":137,
        "parent_id":136,
        "title":"Element 3.1",
        "description":"",
        "nodes":[ ]    
      }
    ]
  }
];


function applyFilter(queryFunction, elements){
  if (!Array.isArray(elements)){
    console.error('Elements is not an array!');
    return;
  }

  if (typeof queryFunction != 'function'){
    console.error('Please provide a valid query function.');
    return; 
  }
  
  function findDescendants(element, parents){
    let filteredResults = [];
    
    if (queryFunction(element))
      filteredResults.push([element, parents])
    
    for (let i=0; i<element.nodes.length; i++)
      filteredResults = filteredResults.concat(
        findDescendants(element.nodes[i], parents.concat([element.id]))
      );
      
    return filteredResults;
  }
  
  let results = [];
  
  for (let i=0; i<elements.length; i++)
    results = results.concat(findDescendants(elements[i], []));
    
  return results;
}


var filteredElementsA = applyFilter(x => /element\s*1/i.test(x.title), elements);
var filteredElementsB = applyFilter(x => x.title == 'Element 3.1', elements);

console.log('Filtered Elements A:');
filteredElementsA.map(x => console.log(JSON.stringify(x[0]) + '\n\n Parents: '  + JSON.stringify(x[1])));

console.log('Filtered Elements B:');
console.log(JSON.stringify(filteredElementsB[0][0]) + '\n\nParents: ' + JSON.stringify(filteredElementsB[0][1]));
/* Original Source: https://stackoverflow.com/users/1447675/nina-scholz */
.as-console-wrapper { max-height: 100% !important; top: 0; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilize Gson to generate and analyze JSON data containing nested objects including a local date

I encountered an error while trying to parse my JSON data. java.lang.IllegalStateException: Expected a string but was NAME at line 1 column 313 path $.reminder com.google.gson.JsonSyntaxException: java.lang.IllegalStateException: Expected a string but was ...

androidjsongson

Encountering a glitch while setting up gulp-sass

I'm encountering an error specifically when trying to install gulp-sass. Other modules, like gulp-livereload, install without any issues. I'm currently using npm version 6.0.0. Below is the relevant section in my package.json: "devDependencies ...

javascriptnpmnpm-installgulp-sass

The use of history.pushState in Chrome triggers a request for the favicon

Code : var newurl = window.location.protocol + "//" + window.location.host + window.location.pathname +"?"+ queryStr; window.history.pushState({path:newurl},'',newurl) Current issue : There is a problem where each time wind ...

javascripthtmlfaviconpushstate

Creating a JSX syntax for a simulated component and ensuring it is fully typed with TypeScript

Looking for some innovative ideas on how to approach this challenge. I have a test helper utils with added types: import { jest } from '@jest/globals' import React from 'react' // https://learn.reactnativeschool.com/courses/781007/lect ...

javascriptreactjstypescriptreact-nativejestjs

Issue with updating the vertices in three.js EdgesGeometry is causing the Line Segments to not be updated as expected

I have created multiple three.js objects. I have observed that the 'other' objects, designed as Mesh/Geometry/Material, update as expected after calling verticesNeedUpdate() Furthermore, I have two wireframe objects that were designed in this m ...

javascriptthree.js

RTK Query may sometimes encounter undefined values when fetching data

I am new to using Redux and facing an issue while trying to display data in a Material UI Select. When I try to show the user's name, it works perfectly, but when I do the same for the partner's data, they appear as undefined. In my server index ...

javascriptreactjsmongoosereact-reduxredux-toolkit

Incorrect variable being updated in Vue.js

I created a filter method called itemsWithFilter to filter the items object and store the results in itemsResult. This function initially works as expected, but I noticed that it automatically updates the original items object. However, I intended for the ...

javascriptvue.js

Can the Angular.js scope be maintained while also making changes to the template?

I am currently facing a challenge with my directive. In the snippet below, I am attempting to extract content from a template, append it to the layout, and then compile it: var $template = angular.element("<div></div>"); $template.append($co ...

javascriptangularjstemplate-engine

Numerous JSON entities

Curious to know if it's achievable to load more than one JSON file with just a single jQuery.ajax() call. Or do I have to make separate calls for each file? Warm regards, Smccullough ...

javascriptjqueryajaxjsonload

Prevent the change event from firing when the page loads in JavaScript - what can be done to avoid

Dealing with a form that contains chained select boxes can be quite challenging. Particularly when the Zend controller is involved in setting default values for these select boxes, which are pulled from the database. As someone who is new to jQuery, naviga ...

javascriptjqueryajax

Receiving several outputs from a function in jQuery using if-else statements

Previously, I attempted to find a solution but encountered a roadblock. I am endeavoring to extract multiple values from a function based on the user's selected parameters. Each value undergoes a test within the function, where depending on the chose ...

javascriptjquerymultiple-value

Load additional data using an android JSON parser

My android app crashes when the json source is too long, so I want to make some modifications. I am looking to implement a feature where the data loads automatically when the user scrolls down, or alternatively, add a "Load More" button. Can someone help ...

javaandroidjsonlistview

Using MongoDB to group by the difference in dates and retrieve the hour value

Currently, I am working on an application and I require some information from my database: I have a model called "traitement" which includes a user, The "traitement" model has a start date and an end date, both in Date format, allowing MongoDB to use ISO ...

javascriptmongodbcoffeescriptmongoose

Converting text/plain form data to JSON using Node.js - step by step guide

I am currently working on a Node.js application to execute a POST call to an API for placing an order. However, the data I receive in our app is in text/plain format and not JSON. This is the current format of the data: TypeOrder=buy Coin=BTC AmountCoin= ...

javascripthtmljsonnode.jsexpress

Transforming a sophisticated nested array containing named values into JSON format

I am facing a challenge with converting an array into JSON format. The array, named classProfiles, has the following structure (seen after inspecting console output): Buildings_clear: Array(0) band1: [Min: 24, Max: 24, Mean: 24, Median: 24, StdDev: 0] ...

javascriptarraysjson

JQuery spinner not triggering OnChange event for Input Type = Number

I am dealing with an <input type="number" class="post-purchase-amount"/>. Currently, I have implemented an ajax call that triggers when the value is changed. It works perfectly fine when I manually change the value by typing in the text box. Howeve ...

javascriptjqueryhtml

Replacing an image within a comment section using a third-party application tutorial

I am facing a challenge with replacing an image in the comment section of my website. The comment section is hosted on a third-party server, and unfortunately, I do not have access to it. Previously, images added by the comment provider HTML Comment Box w ...

javascriptjquerycssimagecss-selectors

"Is there a way to transfer a value from one list box to another without needing to refresh the page, by utilizing AJAX,

Is there a way to automatically load Related Course levels in the Course Level Listbox when selecting a Course from the Course list? <script type="text/javascript" src="js/jquery.js"></script> <div>Course:<select name="course_id" id= ...

javascriptphpjqueryhtmlajax

What is the best way to manage data that arrives late from a service?

Within my Angular application, I have a requirement to store data in an array that is initially empty. For example: someFunction() { let array = []; console.log("step 1"); this.service.getRest(url).subscribe(result => { result.data.forEach( ...

javascriptangulartypescriptangular-servicesangular4-router

Examining the dimensions of a div element in AngularJS

As I delve deeper into understanding AngularJS and tackling the intricacies of how $watch operates, a specific scenario has caught my attention. I want to monitor and track changes in the dimensions of the div element with an ID of "area". My intention is ...

javascriptangularjsonchange