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

Guide on implementing the 'cut' feature using electron-localshortcut

Is there a method in Angular to refresh or recompile a specific section or entire page that utilizes one-time bindings?

Working with JSON objects in AngularJS

Can someone explain the process of unescaping characters in an API response to me?

Tips on cycling through hovered elements in a specific class periodically

What is the origin of the second parameter in an arrow function that returns another arrow function in a React component with Redux?

Validating Input Field with Regular Expression in JavaScript/TypeScript to Avoid Starting with Zero

Error: The absence of an element identified by the locator does not cause the protractor spec to fail, but rather it executes successfully

ActivatedRoute not receiving the parameter value

Tally up the occurrences of each item in the array and provide the result in the form

Modifying SASS variable values based on the presence of specific text in the page URL

retrieve dynamically generated content following successful login using cURL

After conducting a filtered search, the data stored in the Datatable disappears

Encountering a MiniCssExtractPlugin error while trying to build with npm

JavaScript event in Chrome extension triggers a browser notification and allows for modification using a specific method

Avoid having logs displayed on the server end when utilizing console.log commands

Utilizing Polymer 3 in a different context such as ASP.NET MVC allows for the development of versatile components known as PolymerElements that can be reused

Executing a Function Following the Completion of getAuth() in React Firebase

Utilize Vue to access and read a file stored in the current directory

Update the content retrieved through ajax periodically