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

Question

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?

multiple.find(m=>m.name === "DATA1") – Rani Sharim Oct 10 '21 at 19:37 — Rani Sharim, Oct 10 '21 at 19:37

Jp Andrena · Accepted Answer · 2021-10-10T21:03:48.660

0

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>

edited Oct 10 '21 at 21:03

answered Oct 10 '21 at 19:40

Jp Andrena

16
1

But I want to get the data from the name which value is DATA1 – deszok Oct 10 '21 at 19:42
by creating a function we can have the behavior you want – Jp Andrena Oct 10 '21 at 21:08
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – PaulSCoder Oct 10 '21 at 21:33

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

1 Answers1