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

GetServerSideProps function yielding varied prop values

"Enhancing User Experience with Angular 2: Customizing Component Selection and Sty

Design a table within an mdDialog that allows for editing of data presented in JSON format

Styling the button in jQuery to switch between disabled and enabled

Adjust the map automatically as the cursor approaches the map's edge in Google Maps API V3

What could be the reason for a querySelector returning null in a Nextjs/React application even after the document has been fully loaded?

Struggling with implementing the group by feature in AngularJS?

Distance between cursor and the conclusion of the text (autofocus)

Retrieve the data from an HTTP Request using AngularJS

Utilizing Ionic Storage to set default request headers through an HTTP interceptor in an Angular 5 and Ionic 3 application

Is it possible to transfer the style object from PaperProps to makeStyles in Material UI?

Securing access across multiple routes in a React application

Toggle the visibility of a table column based on user selection in Vue.js

Create dynamic transitions for hidden elements using a special technique

One of the great features of Next.js is its ability to easily change

Attempting to dynamically update the image source from an array when a click event occurs in a React component

Tips for creating a tailored Express.js request interface using Typescript efficiently

Display various React components for widgets

What advantages come from destructuring in conjunction with require statements?

How can I retrieve objects using the JSON function?