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

Please provide either your full code or a minimal reproducible example on stackblitz.io. — user4676340
– user4676340, Commented Aug 30, 2018 at 8:12
Please provide more details on 'm' and how data arrives, furthermore is that your complete json file which you just posted? — Mithil Mohan
– Mithil Mohan, Commented Aug 30, 2018 at 8:16
No it sits in an angular service. I will edit in my full service. — Daniel Bailey
– Daniel Bailey, Commented Aug 30, 2018 at 8:18
Where is that you are retrieving the json? and what is the output when you do console.log(m) ? — Mithil Mohan
– Mithil Mohan, Commented Aug 30, 2018 at 8:18

score 1 · Accepted Answer · 2018-08-30 09:23:59Z

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.

edited Aug 30, 2018 at 9:23

answered Aug 30, 2018 at 8:19

user4676340

Sign up to request clarification or add additional context in comments.

6 Comments

Daniel Bailey Over a year ago

Hi thanks for the answer. I am unable to implement it due to the fact that includes is not in es6 but is in es2016. So I will get back to trying out your solution. But it seems promising.

Daniel Bailey Over a year ago

Your answer helped a lot, check EDIT 2.

user4676340 Over a year ago

I have updated my answer with indexOf, because you are using the wrong condition.

user4676340 Over a year ago

@DanielBailey also, are you filtering the values in your checkValue function ? If not, your model won't be updated and you won't see a thing !

Daniel Bailey Over a year ago

I updated my code with a similar condition and then saw yours, pretty much the same thing and it works. Thanks so much for the help, will update your answer as correct.

|

Mithil Mohan · Accepted Answer · 2018-08-30 08:31:48Z

0

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.

edited Aug 30, 2018 at 8:31

answered Aug 30, 2018 at 8:24

Mithil Mohan

2533 silver badges12 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related