Как получить доступ к строкам в массиве строк JSON в Angular 2+?

Question

Я новичок в Angular и Coding.

В настоящее время у меня есть эта строка кода, которая фильтрует мои бренды в моем JSON. Кусок кода, который m.Properties. В основном то, что делает код ниже, это поиск брендов и фильтрация брендов, где свойства бренда совпадают со строками в массиве filteredProperties.

    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));
        }
    }

Однако сейчас мой JSON выглядит следующим образом, обратите внимание, что он жестко запрограммирован в моем сервисе:

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"],

            },
        ]
    }
}

Моя модель выглядит так:

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

Итак, как вы можете видеть, проблема в том, что она возвращает неопределенное значение, когда я выбираю m.Properties. Я использую флажок ввода для фильтрации. Я не уверен, как поступить.

Заранее большое спасибо.

РЕДАКТИРОВАТЬ: Вот мой код поля ввода:

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

Итак, когда происходит щелчок поля ввода, свойство добавляется в массив filteredProperties. Это свойства, которые в данный момент ищутся в свойствах JSON.

РЕДАКТИРОВАТЬ 2:

Итак, я смог использовать часть ответа @trichetriche и использовать indexOf, чтобы получить результат.

Мой код:

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

Answer 1

То, что вы возвращаете в getBrands (): Brands [] - это массив объектов, поэтому вам нужно пройти через каждый элемент, то есть m[0].Properties, m[1].Properties и так далее. Итак, что вы должны делать, это обращаться к m[i].Properties в цикле. Если бы это был один объект, т. Е. {} Без [{}], m.Properties сработал бы. Надеюсь, я в этом разбираюсь.

Answer 2

Если я правильно понял, вы пытаетесь проверить, есть ли хотя бы один из m.properties в вашем brand.properties.

Если это так, вот как вы это делаете:

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)));

Вам необходимо «сравнить» два массива: это означает, что в одном массиве должен быть хотя бы один из его элементов, совпадающий с другим массивом.

Для этого вы сначала будете использовать filter: он удалит все элементы, не соответствующие условию.

Далее вам нужно будет проверить каждый элемент массива Properties и проверить, включен ли этот элемент во второй массив.

Это делается с помощью some, который можно суммировать следующим образом

Перебирать каждый элемент массива; если один элемент соответствует условию, остановите итерацию и верните true.

Условие array.includes, что само собой разумеется.