如何在 Angular 2+ 中访问 JSON 字符串数组中的字符串？答案

【问题标题】：How to access strings in JSON string array in Angular 2+?如何在 Angular 2+ 中访问 JSON 字符串数组中的字符串？
【发布时间】：2018-08-30 08:10:55
【问题描述】：

我是 Angular 和编码的新手。

我目前有这行代码在我的 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));

【问题讨论】：

请在stackblitz.io上提供您的完整代码或minimal reproducible example。
请提供更多关于'm'的细节以及数据是如何到达的，还有你刚刚发布的完整的json文件吗？
不，它位于 Angular 服务中。我将在我的全面服务中进行编辑。
您在哪里检索 json？当您执行 console.log(m) 时，输出是什么？

标签： arrays json angular

【解决方案1】：

如果我的理解正确，您将尝试检查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，我想这是不言自明的。

【讨论】：

您好，感谢您的回答。由于includes 不在 es6 中但在 es2016 中，我无法实现它。所以我会回去尝试你的解决方案。但这似乎很有希望。
您的回答很有帮助，请查看 EDIT 2。
我已经用indexOf更新了我的答案，因为你使用了错误的条件。
@DanielBailey 也是，您是否过滤了 checkValue 函数中的值？否则，您的模型将不会更新，您将看不到任何东西！
我用类似的条件更新了我的代码，然后看到了你的，几乎是一样的，它可以工作。非常感谢您的帮助，将更新您的答案为正确的。

【解决方案2】：

您在 getBrands(): Brands[] 中返回的是一个对象数组，因此您必须遍历每个项目，即m[0].Properties, m[1].Properties 等等。所以你应该做的是循环访问m[i].Properties。如果它是单个对象，即没有 [{}] 的 {}，m.Properties 会起作用。我希望我清楚这一点。

【讨论】：