I am doing a project in vue and I have a json with array inside array. I want to make a filter of months that in function to the months that I select shows the list of products with that filter

And I have a selector with several months (6, 12, 18) How can I show only the products that I have selected with the selector?

 [
      {
        "active": true,
        "installment": [
          [
            {
              "product": "Ipad",
              "months": 12,
              "installment": 63.94
            }
          ],
          [
            {
              "product": "Ipad",
              "months": 6,
              "installment": 63.94
            }
          ]
        ]
      },
      {
        "active": true,
        "installment": [
          [
            {
              "product": "Iphone",
              "months": 12,
              "installment": 63.94
            }
          ],
          [
            {
              "product": "Iphone",
              "months": 6,
              "installment": 63.94
            }
          ]
        ]
      },
      {
        "active": true,
        "installment": [
          [
            {
              "product": "Mac",
              "months": 18,
              "installment": 63.94
            }
          ],
          [
            {
              "product": "Mac",
              "months": 24,
              "installment": 63.94
            }
          ]
        ]
      }
    ]

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can iterate through your array, and then push the elements which passes the criteria to a new array, it would look something like this

const array = [
    {
        "active": true,
        "installment": [
            [
                {
                    "product": "Ipad",
                    "months": 12,
                    "installment": 63.94
                }
            ],
            [
                {
                    "product": "Ipad",
                    "months": 6,
                    "installment": 63.94
                }
            ]
        ]
    },
    {
        "active": true,
        "installment": [
            [
                {
                    "product": "Iphone",
                    "months": 12,
                    "installment": 63.94
                }
            ],
            [
                {
                    "product": "Iphone",
                    "months": 6,
                    "installment": 63.94
                }
            ]
        ]
    },
    {
        "active": true,
        "installment": [
            [
                {
                    "product": "Mac",
                    "months": 18,
                    "installment": 63.94
                }
            ],
            [
                {
                    "product": "Mac",
                    "months": 24,
                    "installment": 63.94
                }
            ]
        ]
    }
]

let res = [];
// const filter = (y) => y.months == 6;
// if you have multiple filters
const filter = (y) => [6, 12, 18].includes(y.months);
array.forEach(x => {
    x.installment.forEach(y => {
        y[0].active = x.active;
        if (filter(y[0])) res = [...res, ...y];
    })
})

console.log(res);

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You can just filter them

const data = [
  {
    "active": true,
    "installment": [
      [
        {
          "product": "Ipad",
          "months": 12,
          "installment": 63.94
        }
      ],
      [
        {
          "product": "Ipad",
          "months": 6,
          "installment": 63.94
        }
      ]
    ]
  },
  {
    "active": true,
    "installment": [
      [
        {
          "product": "Iphone",
          "months": 12,
          "installment": 63.94
        }
      ],
      [
        {
          "product": "Iphone",
          "months": 6,
          "installment": 63.94
        }
      ]
    ]
  },
  {
    "active": true,
    "installment": [
      [
        {
          "product": "Mac",
          "months": 18,
          "installment": 63.94
        }
      ],
      [
        {
          "product": "Mac",
          "months": 24,
          "installment": 63.94
        }
      ]
    ]
  }
]

const filtered = data.map((item) => {
  const { installment } = item;
  const filteredInstallment = installment.map((item) => {
    const filteredProducts = item.filter((product) => product.months === 6)
    return filteredProducts;
  });

  return filteredInstallment;
});

console.log(filtered)

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>