Angular 11 - How to import array data into highcharts

Question

I'm using angular 11, typescript

I have this array structure that I want to import in highcharts, but I don't know how to. I'm using api response to get the data and every time a user take a new quiz it adds another set of quiz_title, passed and failed.

 "message": "Remarks successfuly shown",
    "error": false,
    "error code": 200,
    "line": "line215215",
    "quizRemarks": [
        {
            "Quiz_Title": "Acts and Regulation",
            "Passed": "24",
            "Failed": "6"
        },
        {
            "Quiz_Title": "Breakdowns and Accidents",
            "Passed": "7",
            "Failed": "3"
        },
        {
            "Quiz_Title": "Coupling and Uncoupling Semi-Trailers",
            "Passed": "2",
            "Failed": "8"
        },
        {
            "Quiz_Title": "Defensive Driving",
            "Passed": "2",
            "Failed": "37"
        },
        {
            "Quiz_Title": "Driver Health and Safety",
            "Passed": "7",
            "Failed": "1"
        },
        {
            "Quiz_Title": "General Knowledge",
            "Passed": "4",
            "Failed": "14"
        }
    ]
}

Show us what you have tried so far?

Selaka Nanayakkara
– Selaka Nanayakkara

2021-10-01 06:01:25 +00:00
Commented Oct 1, 2021 at 6:01 — Selaka Nanayakkara
– Selaka Nanayakkara, Commented Oct 1, 2021 at 6:01
This is my attempt stackoverflow.com/questions/69388616/…

reginald bollosa
– reginald bollosa

2021-10-01 07:02:30 +00:00
Commented Oct 1, 2021 at 7:02 — reginald bollosa
– reginald bollosa, Commented Oct 1, 2021 at 7:02

Sebastian Wędzel · Accepted Answer · 2021-10-01 07:35:15Z

1

Is this an output that you want to achieve?

const chartData = dataFromServer.map(data => ({
  name: data["Quiz_Title"],
  data: [{
      name: 'Passed',
      y: parseInt(data["Passed"])
    },
    {
      name: 'Failed',
      y: parseInt(data["Failed"])
    }
  ]
}));

https://jsfiddle.net/BlackLabel/dz1wheut/

answered Oct 1, 2021 at 7:35

Sebastian Wędzel

11.7k1 gold badge9 silver badges17 bronze badges

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

2 Comments

reginald bollosa Over a year ago

Yes that is the output that I want, here is my code I tried it and it's not working jsfiddle.net/08v5bzgw/#&togetherjs=0a21RJhOQN

Sebastian Wędzel Over a year ago

It's not working because it's not Angular envoirment.

Collectives™ on Stack Overflow

Angular 11 - How to import array data into highcharts

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related