How to get items from another directory?

Question

Vue.js

Good time! I use vue, vue-resource, no vue-router. The task, after requesting a catalog of product categories (sweet, salty, etc.) category.json, is to get product elements (sweets, cookies, etc.) products.jsonfrom another catalog by clicking on the corresponding category.
In my example, the list of categories is loaded first:

created(){
       this.$http.get('category.php')
       .then (response => response.json())
       .then (data => {
           this.products = data
           console.log(this.products)
       }, (error) => {
            console.log(error);
          })  
    }

Then, on the event category element:

viewProduct(section_id) {
       this.$http.get('product.json')
       .then (response => response.json())
       .then (data => {
           this.product = data.section_id
           console.log(this.product)
       }, (error) => {
            console.log(error);
          })  
    }
      }

It is not a problem to get a catalog of categories or a catalog of products in its entirety, but how to link a category_id so that only the products of the selected category are displayed - there is not enough mind. category_id is present in category.json and product.json respectively on each element to call.
Through one catalog previously implemented, BUT asked to be divided into two.
Thank you in advance and I apologize for my little knowledge in such matters.

Answer 1

Maybe it's more correct to make a selection on the server, why pull the entire list of products?
But if there is not much data, you can filter:
var selectProducts = product.filter(function(category_id) {
return category_id === this.selectCategory_id
})