Converting the structure of an object into an array structure for highcharts can be achieved through

Question

Converting the structure of an object into an array structure for highcharts can be achieved through

I am looking to transform the object structure below:

     [
        {
            "tahun": "2010",
            "apel": 100,
            "pisang": 200,
            "anggur": 300,
            "nanas": 400,
            "melon": 500
        },
        {
            "tahun": "2011",
            "apel": 145,
            "pisang": 167,
            "anggur": 210,
            "nanas": 110,
            "melon": 78
        }
     [

into this array structure for my highchart in Django,

[
 ["2010",100],
 ["2010",200],
 ["2010",300],
 ["2010",400],
 ["2010",500],
 ["2011",145],
 ["2011",167],
 ["2011",210],
 ["2011",110],
 ["2011",78]
]

Any suggestions on achieving this transformation, perhaps using AJAX?

javascript ajax django highcharts

Answer 1

Answer №1

To transform a list of dictionaries into a list of lists on the server side, you can use the following code snippet:

>>> data = [{'year': '2010', 'apple': 100, 'banana': 200, 'grape': 300, 'pineapple': 400, 'watermelon': 500}, {'year': '2011', 'apple': 145, 'banana': 167, 'grape': 210, 'pineapple': 110, 'watermelon': 78}]
>>> [[x['year'], x['apple']] for x in data]
[['2010', 100], ['2011', 145]]

Answer 2

To transform a list of dictionaries into a list of lists on the server side, you can use the following code snippet:

>>> data = [{'year': '2010', 'apple': 100, 'banana': 200, 'grape': 300, 'pineapple': 400, 'watermelon': 500}, {'year': '2011', 'apple': 145, 'banana': 167, 'grape': 210, 'pineapple': 110, 'watermelon': 78}]
>>> [[x['year'], x['apple']] for x in data]
[['2010', 100], ['2011', 145]]

Answer 3

Answer №2

If you need to simplify the original format into a different structure, you can achieve that using the following method:

const data = [
  {
      "year": "2010",
      "apple": 100,
      "banana": 200,
      "grapes": 300,
      "pineapple": 400,
      "melon": 500
  },
  {
      "year": "2011",
      "apple": 145,
      "banana": 167,
      "grapes": 210,
      "pineapple": 110,
      "melon": 78
  }
];

const result = data.reduce((prev, curr) => {
  const year = curr.year;
  delete curr.year;
  return [...prev, ...Object.keys(curr).map(key => [year, curr[key]])];
}, []);

It may not be the most elegant solution, but it gets the job done.

Answer 4

If you need to simplify the original format into a different structure, you can achieve that using the following method:

const data = [
  {
      "year": "2010",
      "apple": 100,
      "banana": 200,
      "grapes": 300,
      "pineapple": 400,
      "melon": 500
  },
  {
      "year": "2011",
      "apple": 145,
      "banana": 167,
      "grapes": 210,
      "pineapple": 110,
      "melon": 78
  }
];

const result = data.reduce((prev, curr) => {
  const year = curr.year;
  delete curr.year;
  return [...prev, ...Object.keys(curr).map(key => [year, curr[key]])];
}, []);

It may not be the most elegant solution, but it gets the job done.

Converting the structure of an object into an array structure for highcharts can be achieved through

Answer №1

Answer №2

Similar questions

What steps are involved in implementing Local fonts in theme UI for Next JS?

The backend is not receiving the variable through RESTful communication

Struggling with identifying errors in the Javascript code for my assignment

What is the process for adjusting the form transition?

Problem with ngStyle: Error indicating that the expected '}' is missing

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

Blending an HTML jQuery toggle

Switch the toggle to activate or deactivate links

a function that repeats every single second

Are jQuery plugins offering accessible public functions?

Subclassing Observable in RxJS 5: Parent class instances are returned by static methods

When running the `vue-cli-service test:unit` command, an error involving an "Unexpected token" message related to the usage of the spread operator

Combining arrays using JavaScript

Assign a CSS class to a DIV depending on the vertical position of the cursor

Load components dynamically and place them in a flexible position based on the context

How can I fetch the ID from a posted AJAX request in PHP?

Events for focusing and blurring top level windows

Wait for Protractor until the page has completely finished loading

Exploring the concept of inheritance and nested views within AngularJS

Handling typeError in Vue.js JavaScript filter for object manipulation