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

I am using ngx-charts and I am getting plotting some json data on a chat like this:

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>

This works fine...but now I want to merge multiple json objects into one datasource so I've done this:

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
          }
        ]
      }
  ]

then 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>

I'm trying to display data1 using: multiple[0].data1

But I get error:

Property 'data1' does not exist ...

How can I do this so I can reach the wanted object by name?

CodePudding user response：

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>