Json 多个对象分隔的数据...如何按名称访问特定对象

Question

我正在使用 ngx-charts，我正在像这样在聊天中绘制一些 json 数据：

app.component.ts:

data1 = [
    {
      "name": "DATA1",
      "series": [
        {
          "name": "ONE",
          "value": 0.017
        },
        {
          "name": "TWO",
          "value": 0.008
        },
        {
          "name": "THREE",
          "value": 0.022
        }
      ]
    }
  ]

app.component.html

<ngx-charts-bar-vertical-2d 
    [results]="data1"
    [legend]="true"
    [legendTitle]="'Product Sale Report'" 
    [view]="[1000,300]">
</ngx-charts-bar-vertical-2d>

这很好用...但现在我想将多个 json 对象合并到一个数据源中，所以我这样做了：

app.component.ts

multiple = [
      {
        "name": "DATA1",
        "series": [
          {
            "name": "ONE",
            "value": 0.017
          },
          {
            "name": "TWO",
            "value": 0.008
          },
          {
            "name": "THREE",
            "value": 0.022
          }
        ]
      },
      {
        "name": "DATA2",
        "series": [
          {
            "name": "ONE2",
            "value": 0.017
          },
          {
            "name": "TWO2",
            "value": 0.008
          },
          {
            "name": "THREE2",
            "value": 0.022
          }
        ]
      }
  ]

然后app.component.html

<ngx-charts-bar-vertical-2d 
    [results]="multiple[0].data1"
    [legend]="true"
    [legendTitle]="'Product Sale Report'" 
    [view]="[1000,300]">
</ngx-charts-bar-vertical-2d>

我正在尝试使用以下方法显示数据 1：multiple[0].data1

但是我得到错误：

属性 'data1' 不存在...

我该怎么做才能通过名称找到想要的对象？

Answer 1

app.component.ts :

multiple = [
    {
      name: 'DATA1',
      series: [
        {
          name: 'ONE',
          value: 0.017,
        },
        {
          name: 'TWO',
          value: 0.008,
        },
        {
          name: 'THREE',
          value: 0.022,
        },
      ],
    },
    {
      name: 'DATA2',
      series: [
        {
          name: 'ONE2',
          value: 0.017,
        },
        {
          name: 'TWO2',
          value: 0.008,
        },
        {
          name: 'THREE2',
          value: 0.022,
        },
      ],
    },
  ];
  getData(name) {
    let data = [this.multiple.find((e) => e.name == name)];
    return data;
  }

app.component.html :

<ngx-charts-bar-vertical-2d
  [results]="getData('DATA1')"
  [legend]="true"
  [legendTitle]="'Product Sale Report'"
  [view]="[1000, 300]"
>
</ngx-charts-bar-vertical-2d>

Json 多个对象分隔的数据...如何按名称访问特定对象

Json Data with multiple objects separated ... How to reach a specific object by name

json

angular

angular12

ngx-charts