How to loop over nested JSON array and filter out search Query in Angular?-CodePudding

I have a complex nested JSON Array and I want to filter it(name property) through based on what user enters in input tag and show it as an autocomplete. A basic of it I have created here on stackblitz click here for the code. I have two entries of name "Tom" in two different objects so when user types Tom it should appear twice in the autocomplete as of now it shows only once. So if I press letter "T" it should show me all the names starting with "T". Here in this case "Tom" twice if I press "To" and if I press just "T" then Tiffany and Tom 2 times. Could you please help me here in the code ? Any help is appreciated. Thanks much!

CodePudding user response：

You were on a good path. The only missing thing in this recursive walk is keeping state of matches like this:

filter(arr, term, matches) {
    if (term.length == 0) {
      matches = [];
      document.getElementById('list').innerHTML = '';
    }
    arr.forEach((i) => {
      if (i.name.includes(term)) {
        matches.push(i);
      } 
      if (i.children.length > 0) {
        this.filter(i.children, term, matches);
      }
    });
    console.log(matches);

    if (matches.length > 0) {
      document.getElementById('list').innerHTML = matches[0].name;
    }
  }

CodePudding user response：

You can check the below code also, I have updated code you check in stackbliz https://stackblitz.com/edit/angular-ivy-k14se7

matches = [];
  ngOnInit() {}
  searchKeyup(ev) {
 
    var term: any = ev.target as HTMLElement;
    console.log("Value", term.value);
    this.matches = [];
    let content = [
      {
        name: 'Robert',
        children: [],
      },
      {
        name: 'Doug',
        children: [
          {
            name: 'James',
            children: [
              {
                name: 'John',
                children: [
                  {
                    name: 'Tom',
                    children: [],
                  },
                ],
              },
            ],
          },
        ],
      },
      {
        name: 'Susan',
        children: [
          {
            name: 'Tiffany',
            children: [
              {
                name: 'Merry',
                children: [
                  {
                    name: 'Sasha',
                    children: [],
                  },
                  {
                    name: 'Tommy',
                    children: [],
                  },
                ],
              },
            ],
          },
        ],
      },
    ];
    if(term.value.length > 0){
      this.filter(content, term.value);
    } else {
      document.getElementById('list').innerHTML = '';
    }

    if (this.matches.length > 0) {
      document.getElementById('list').innerHTML = this.matches.map(match => match.name).join(",");
    } else{
      document.getElementById('list').innerHTML = "";
    }
    
  }
  filter(arr, term) {
       
    arr.forEach((i) => {
      if (i.name.includes(term)) {
        this.matches.push(i);
      } 
      if (i.children.length > 0) {
        this.filter(i.children, term);
      }
    });
    console.log(this.matches);
  }