How to search a value from an json which has 2 level as return matches from both the object?

Question

I have a array of object which has a inside array which need to be filtered and return array based on matches from both. search is (input) event, which executes on every key press. stackblitz link stackblitz

 list = [
          {
            id: 'abc',
            data: [
              { key: '1', value: 'car' },
              { key: '2', value: 'bus' },
              { key: '3', value: 'bike' },
              { key: '4', value: 'truck' },
              { key: '5', value: 'jeep' },
            ],
          },
          {
            id: 'def',
            data: [
              { key: '1', value: 'car' },
              { key: '2', value: 'bicycle' },
              { key: '3', value: 'train' },
              { key: '4', value: 'aeroplane' },
              { key: '5', value: 'jeep' },
            ],
          },
        ];
 handleSearch = (event) => {
    if (event.target.value.length > 0) {
      const item = this.list[0].data.filter((items) =>
        items.value.toLowerCase().includes(event.target.value.toLowerCase())
      );
      this.list[0].data = item;
    } else {
      this.list[0].data = this.orgList;
    }
  };

expect output

input = car

output = [
  {
    id: 'abc',
    data: [
      { key: '1', value: 'car' },
    ],
  },
  {
    id: 'def',
    data: [
      { key: '1', value: 'car' },
    ],
  },
];

input = truck

output = 
[
  {
    id: 'abc',
    data: [
      { key: '4', value: 'truck' },
    ],
  },
];

Answer 1

Generaly speaking, when dealing with filtering, avoid using same original array to display filtered results in template.

Concerning filtering function, this should do the trick:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  public list: any;
  public orgList: any;
  public filteredList: any;

  ngOnInit() {
    this.list = this.orgList = [
      {
        id: 'abc',
        data: [
          { key: '1', value: 'car' },
          { key: '2', value: 'bus' },
          { key: '3', value: 'bike' },
          { key: '4', value: 'truck' },
          { key: '5', value: 'jeep' },
        ],
      },
      {
        id: 'def',
        data: [
          { key: '1', value: 'car' },
          { key: '2', value: 'bicycle' },
          { key: '3', value: 'train' },
          { key: '4', value: 'aeroplane' },
          { key: '5', value: 'jeep' },
        ],
      },
    ];
  }

  filterData = (dataItem, term: string) => {
    return dataItem.value.toLowerCase().indexOf(term.toLowerCase()) !== -1;
  };

  handleSearch = (event) => {
    if (event.target.value.length === 0) {
      this.filteredList = [];
      return;
    }

    const term = event.target.value;
    const temp = this.list.filter((fullItem) =>
      fullItem.data.filter((dataItem) => this.filterData(dataItem, term))
    );

    this.filteredList = temp
      .map((fullItem) => ({
        ...fullItem,
        data: fullItem.data.filter((dataItem) =>
          this.filterData(dataItem, term)
        ),
      }))
      .filter((fullItem) => fullItem.data.length > 0);
  };
}

Answer 2

I know that I might be going a bit outside of the scope of your requirements here, but I just simply thought that it might be easier to do it like this.

I just thought that it might be somewhat more scalable this way, if you first flatten the structure, because for arguments sake, let's say that you're data structure needs to become more & more complex overtime, IDK, business requirements change. At least if you have some layer of abstraction to manage that, you can then filter on an array of objects quite simply, like I've done below.

Depending on your needs you may not even need to flatten the structure, it's just my opinion & experience states this to be an easier & more maintainable kinda solution to scale. If you're data structure dose evolve with complexity, where there may be nested structures, you could always look at using some clever little recursive function to flatten your structure.

It's worth also noting that I've added some validation to the search function, while it's probably not a requirement, it's not a bad idea to include such logic, where you could update state on your view model. You could include something like a toast notification, stating that the user has provided an invalid search term, you could be making a request to a server to get this data & you could say that there were no results, etc, I think you get the idea?

I hope that's helped & I'm sorry if I've gone a little OTT. 😅

const list = [
  {
    id: 'abc',
    data: [
      { key: '1', value: 'car' },
      { key: '2', value: 'bus' },
      { key: '3', value: 'bike' },
      { key: '4', value: 'truck' },
      { key: '5', value: 'jeep' },
    ],
  },
  {
    id: 'def',
    data: [
      { key: '1', value: 'car' },
      { key: '2', value: 'bicycle' },
      { key: '3', value: 'train' },
      { key: '4', value: 'aeroplane' },
      { key: '5', value: 'jeep' },
    ],
  },
];


const flattenStructure = data => {
  return data.reduce((accumulator, item) => {
    const items = item.data.reduce((vehicles, vehicle) => {
      const modified = { ...vehicle, id: item.id };
      return vehicles.concat(modified);
    }, []);

    return accumulator.concat(items);
  }, []);
};


const search = (array, term) => {
  const invalidTerm = term == null || typeof term != 'string' || term.replace(/ /g, '') == '';
  const invalidArray = array == null || !Array.isArray(array);

  if (invalidTerm || invalidArray) {
    console.log("Invalid arguments provided.");
    return array;
  }
 
  return flattenStructure(array).filter(vehicle => {
    const match = vehicle.value.toLowerCase() == term.toLowerCase();
    const contains = vehicle.value.toLowerCase().indexOf(term.toLowerCase()) > -1;
    return match || contains;
  });
};

console.log(search(list, 'car'));
console.log(search(list, 'truck'));

Answer 3

const list = [{id: 'abc',data: [{ key: '1', value: 'car' },{ key: '2', value: 'bus' },{ key: '3', value: 'bike' },{ key: '4', value: 'truck' },{ key: '5', value: 'jeep' },],},{id: 'def',data: [{ key: '1', value: 'car' },{ key: '2', value: 'bicycle' },{ key: '3', value: 'train' },{ key: '4', value: 'aeroplane' },{ key: '5', value: 'jeep' },],},];


function search(arr, searchVal) {
    return arr.map((item) => {
        const data = item.data.filter(({ value }) => value === searchVal);
        return { ...item, data };
      })
      .filter(({ data }) => data.length);
}


console.log(search(list, 'car'));
console.log(search(list, 'truck'));

.as-console-wrapper { max-height: 100% !important; top: 0 }

Angular demo