How to access strings in JSON string array in Angular 2+?

Question

I am new to Angular and Coding.

I currently have this line of code that is filtering my brands in my json. The piece of code that is m.Properties. Basically what the code below does is its looking at the brands and filtering the brands where the properties of the brand are the same as the strings in the filteredProperties array.

    for (var i = this.filteredProperties.length - 1; i >= 0; i--) {
        if (this.filteredProperties[i] == property) {
            this.visibleBrands = this.brands.filter(m => m.Properties == this.filteredProperties.find(y => y === m.Properties));
        }
    }

However right now my JSON looks like this, note it is hard coded into my service:

import { Injectable } from '@angular/core';

import { Brands } from '../models/brand.model';

@Injectable() 
export class BrandService {


    getBrands(): Brands[] {
        return [
            {
                "Id": 1,
                "Title": "Alternative Investments",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec.",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties": ["institutional"],

            },
            {
                "Id": 2,
                "Title": "Customised Solutions",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties":["personal"],

            },
            {
                "Id": 3,
                "Title": "Future Growth",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties": ["institutional"],

            },
            {
                "Id": 4,
                "Title": "Global Emerging Markets",
                "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
                "ImageUrl": "C:/Users/xy57418/Pictures/Anguar Rewrite/PlaceHolder BrandLogos.png",
                "FundsUrl": "www.google.com",
                "OurPeopleUrl": "www.google.com",
                "WhyInvestUrl": "www.google.com",
                "MoreInfoUrl": "www.google.com",
                "Properties": ["institutional", "personal"],

            },
        ]
    }
}

My Model looks like this:

export class Brands {
    Id: number;
    Title: string;
    Description: string;
    ImageUrl: string;
    FundsUrl: string;
    OurPeopleUrl: string;
    WhyInvestUrl: string;
    MoreInfoUrl: string;
    Properties: string[];
}

So as you can see the problem that occurs is that it returns undefined when I select m.Properties. I am using an input checkbox to filter. I am not sure how to proceed.

Thank you so much in advance.

EDIT: Here is my input box code:

<input type="checkbox" name="Personal" value="Personal" [(ngModel)]="Personal" (change)="checkValue(Personal, property='personal')"/> Personal<br />

So what happens is when the input box is clicked, the property is added to the array filteredProperties. These are the properties that are currently being looked for in the JSON properties.

EDIT 2:

So I was able to use part of @trichetriche answer and use indexOf to get a result.

My Code:

this.visibleBrands = this.brands.filter(item => item.Properties.some(property => this.filteredProperties.indexOf(property) > -1));

Answer 1

If I got it correctly, you're trying to check if at least one of the m.properties is in your brand.properties.

If this is the case, here is how you do it :

const data = [{
  "Id": 4,
  "Title": "Global Emerging Markets",
  "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin ornare lectus, quis gravida tortor venenatis nec. ",
  "IUrl": "www.google.com",
  "FUrl": "www.google.com",
  "OUrl": "www.google.com",
  "WUrl": "www.google.com",
  "MUrl": "www.google.com",
  "Properties": ["institutional", "personal"],
}];

const validProperties = ['personal', 'financial'];
const invalidProperties = ['marital', 'governmental'];

console.log(data.filter(item => item.Properties.some(property => validProperties.indexOf(property) !== -1)));
console.log(data.filter(item => item.Properties.some(property => invalidProperties.indexOf(property) !== -1)));

You have to "compare" two arrays : this means that one array has to have at least one of its elements matching the other array.

To do that, you're going to use filter first : it will remove any items not matching the condition.

Next, you will have to check every item of your Properties array, and check if this item is included in the second array.

This is done with some, which can be summed up like this

Iterate over every element of the array ; if one item is matching the condition, stop the iteration and return true.

The condition is array.includes, which is self explanatory I guess.

Answer 2

What you are returning in getBrands(): Brands[] is an array of objects, so you have to traverse through each item ie m[0].Properties, m[1].Properties and so on. So what you should be doing is accessing m[i].Properties in a loop. Had it been a single object ie {} without [{}] , m.Properties would have worked. I hope I'm clear on this.