Filtering, and displaying nested object data

Question

I have an array of objects that need to be filtered through, and displayed depending on which checkbox is selected. I can get it to work with a one dimension array, when I nest deeper I don't understand how to get everything working again.

This is the initial function that filters the array:

computed: {
selectedFilters: function() {
  let filters = [];
  let checkedFilters = this.shopFilters.filter(obj => obj.checked);
  checkedFilters.forEach(element => {
    filters.push(element.value);
  });
  return filters;
 }
}

Tis is the data it pulls from:

shopFilters: [
    {
      name: 'price',
      categories: [
      {
        checked: false,
        value: 'Under $50'
      },
      {
        checked: false,
        value: '$50 to $100'
      },
      {
        checked: false,
        value: '$100 to $150'
      },
      {
        checked: false,
        value: '$150 to $200'
      },
      {
        checked: false,
        value: 'Over $200'
      },
      ]
    },
    {
      name: 'sports',
      categories: [
      {
        checked: false,
        value: 'lifestyle'
      },
      {
        checked: false,
        value: 'running'
      },
      {
        checked: false,
        value: 'basketball'
      },
      {
        checked: false,
        value: 'football'
      },
      {
        checked: false,
        value: 'soccer'
      },
      {
        checked: false,
        value: 'training & gym'
      },
      {
        checked: false,
        value: 'skateboarding'
      },
      {
        checked: false,
        value: 'baseball / softball'
      },
      {
        checked: false,
        value: 'golf'
      }
      ]
    }
  ]

This is the function that filters through the product data in another file to display on the page:

    methods: {
    getfilteredData: function() {
      this.filteredData = data;
      let filteredDataByfilters = [];
      // first check if filters where selected
      if (this.selectedFilters.length > 0) {
        filteredDataByfilters= this.filteredData.filter(obj => this.selectedFilters.every(val => obj.indexOf(val) >= 0));
        this.filteredData = filteredDataByfilters;
      }
    }
   }

What the data looks like:

const data = [
{
    name: 'SNKR 001',
    gender: 'Men',
    price: 100,
    sport: 'running',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
},
{
    name: 'SNKR 002',
    gender: 'Men',
    price: 100,
    sport: 'running',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
},
{
    name: 'SNKR 003',
    gender: 'Men',
    price: 100,
    sport: 'training & gym',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
},
{
    name: 'SNKR 004',
    gender: 'Men',
    price: 100,
    sport: 'lifestyle',
    width: 'Wide',
    colors: ['black', 'white', 'green', 'pink'],
    sizes: [3, 3.5, 4, 4.5, 5, 5.5, 6, 6.5, 7, 7.5, 8, 8.5, 9, 9.5, 10, 10.5, 11, 11.5, 12, 12.5, 13, 14, 15],
    image: '../assets/images/shoe-1.png'
}
];
export default data;

What's the structure of your data? Is looks like your filter is only keeping items that contain ALL of the string values of your currently selected filters. Maybe you really need to compare against a data.property? — BizzyBob
– BizzyBob, Commented Mar 3, 2019 at 1:01
I'm not exactly sure how to implement this - do you mean changing the code in 'selectedFilters'? Also, I've attached the data structure as well for better reference. — Endeavor
– Endeavor, Commented Mar 3, 2019 at 2:35

ittus · Accepted Answer · 2019-03-03 01:08:46Z

You can merge all filter into 1 array:

const categories = this.shopFilters.map(item => item.categories)
const flatFilters = [].concat.apply([], categories)

then the filter will become flat:

flatFilters: [{
    checked: false,
    value: 'Under $50'
  },
  {
    checked: false,
    value: '$50 to $100'
  },
  {
    checked: false,
    value: '$100 to $150'
  },
  {
    checked: false,
    value: '$150 to $200'
  },
  {
    checked: false,
    value: 'Over $200'
  },
  {
    checked: false,
    value: 'lifestyle'
  },
  {
    checked: false,
    value: 'running'
  },
  {
    checked: false,
    value: 'basketball'
  },
  {
    checked: false,
    value: 'football'
  },
  {
    checked: false,
    value: 'soccer'
  },
  {
    checked: false,
    value: 'training & gym'
  },
  {
    checked: false,
    value: 'skateboarding'
  },
  {
    checked: false,
    value: 'baseball / softball'
  },
  {
    checked: false,
    value: 'golf'
  }
]

then use can apply old logic

computed: {
  selectedFilters: function() {
    let filters = [];
    const categories = this.shopFilters.map(item => item.categories)
    const flatFilters = [].concat.apply([], categories)
    let checkedFilters = flatFilters.filter(obj => obj.checked);
    checkedFilters.forEach(element => {
      filters.push(element.value);
    });
    return filters;
  }

Collectives™ on Stack Overflow

Filtering, and displaying nested object data

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related