Guidelines for iterating through a nested JSON array and extracting a search query in Angular

Question

Guidelines for iterating through a nested JSON array and extracting a search query in Angular

I'm currently working with a complex nested JSON Array and I need to filter it (based on the name property) according to what the user enters in an input tag, displaying the results as an autocomplete. I've started developing a basic version of this on Stackblitz - check out the code here. There are two entries for the name "Tom" in two separate objects, so when a user types "Tom", it should appear twice in the autocomplete instead of just once. Ideally, when the user types the letter "T", all names starting with "T" should be displayed. For example, typing "To" should show "Tom" twice, while typing just "T" should display "Tiffany" and "Tom" both 2 times. Can anyone provide some guidance on how to achieve this in the code? Your assistance is greatly appreciated. Thank you!

javascript angular typescript

Answer 1

Answer №1

If you want to review the updated code as well, feel free to check it out on stackbliz here

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);
  }

Answer 2

If you want to review the updated code as well, feel free to check it out on stackbliz here

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);
  }

Answer 3

Answer №2

It seemed like you were on the right track with your recursive walk. However, one thing that was missing was keeping track of the state of matches throughout the process:

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;
    }
}

Answer 4

It seemed like you were on the right track with your recursive walk. However, one thing that was missing was keeping track of the state of matches throughout the process:

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;
    }
}

Guidelines for iterating through a nested JSON array and extracting a search query in Angular

Answer №1

Answer №2

Similar questions

Enforce boundaries by constraining the marker within a specified polygon on a leaflet map

Adjust the page URL during execution of a Protractor test

Creating a Form Layout with Bootstrap - Organizing Text Boxes and Text Areas

The sticky navigation and scroll to top features both function perfectly on their own, but when used simultaneously, they do not work

Using Javascript's .replace() method to preserve HTML elements

Numerous sections with tabs on the webpage

Generate pre-set components using fundamental building blocks

Implement a click event for the X-Axis label in Angular 2 Highcharts

What steps can be taken to resolve the error message "t.onSubmit is not a function" that occurs upon form submission?

Displaying a collection of nested objects in AngularRendering a group

I'm having trouble with my code not working for get, set, and post requests. What could be causing this issue and how can I

Should I use Object.assign or define class properties?

Require help with personalizing a jQuery horizontal menu

The pathway of information within an AngularJS modal window

I am looking for the best way to sort my JSON data based on user roles before it is transmitted to the front end using Express and MongoDB. Any

Using the OR operator in an Angular filter

What is the best way to link the data from the HTML input to the class property in the TypeScript file? (Combining Angular and IntroJs)

Encountering a navCtrl problem in Ionic 3 while attempting to utilize it within a service

What is the necessity of explicitly requesting certain core modules in Node.js?

Every time I try to run my Angular app, it crashes. I've already tried reinstalling Node and rebooting