Generate arrays with custom names by parsing JSON data

Question

Generate arrays with custom names by parsing JSON data

Currently, I am retrieving data from a MySQL database and converting it to JSON before passing it to a JavaScript class for chart display purposes. The challenge lies in creating arrays required by the chart from the JSON object without manually creating and populating them.

Here is what my object structure looks like:

var myJSON = [
        {"name1": "value11", "name2":"value21", "name3": "value31"},
        {"name1": "value12", "name2":"value22", "name3": "value32"},
        {"name1": "value13", "name2":"value23", "name3": "value33"}
]

I aim to transform it into this format:

var myData = {
"name1": ["value11", "value12", "value13"],
"name2": ["value21", "value22", "value23"],
"name3": ["value31", "value32", "value33"],
}

While I could manually create and populate the arrays, I believe there must be a more elegant solution. I have explored functions like Map, Object.keys, and Object.entries but haven't been able to crack the code.

My preference is to resolve this issue within JavaScript, but I've also included Mysql/PDO tags as alternative data fetching methods are on the table.

Despite my efforts since Friday, an elegant solution continues to elude me. Any assistance would be greatly valued.

javascript mysql json pdo echarts

Answer 1

Answer №1

I labeled the question with Mysql/PDO because I might be able to retrieve the information in a different way.

Absolutely, it is possible.

In order to obtain such an array, you will need to utilize FETCH_GROUP along with fetch_COLUMN

Answer 2

I labeled the question with Mysql/PDO because I might be able to retrieve the information in a different way.

Absolutely, it is possible.

In order to obtain such an array, you will need to utilize FETCH_GROUP along with fetch_COLUMN

Answer 3

Answer №2

To implement this functionality, utilize the combination of reduce, forEach, and Object.entries:

var obj = [
  {"name1": "value11", "name2":"value21", "name3": "value31"},
  {"name1": "value12", "name2":"value22", "name3": "value32"},
  {"name1": "value13", "name2":"value23", "name3": "value33"}
]

console.log(obj.reduce((a, o) => (Object.entries(o).forEach(([k,v]) => a[k] ? a[k].push(v) : a[k] = [v]), a), {}))

reduce iterates through each object, maintaining previous values in a.

Object.entries generates key-value pairs for each object in the array.

forEach loops over each pair and appends the values to the accumulator a.

The one-liner broken down into separate lines:

var obj = [
  {"name1": "value11", "name2":"value21", "name3": "value31"},
  {"name1": "value12", "name2":"value22", "name3": "value32"},
  {"name1": "value13", "name2":"value23", "name3": "value33"}
]

console.log(
  obj.reduce((a, o) => (
    Object.entries(o).forEach(([k,v]) => 
      a[k] ? a[k].push(v) : a[k] = [v]
    ), a
  ), {})
)

Answer 4

To implement this functionality, utilize the combination of reduce, forEach, and Object.entries:

var obj = [
  {"name1": "value11", "name2":"value21", "name3": "value31"},
  {"name1": "value12", "name2":"value22", "name3": "value32"},
  {"name1": "value13", "name2":"value23", "name3": "value33"}
]

console.log(obj.reduce((a, o) => (Object.entries(o).forEach(([k,v]) => a[k] ? a[k].push(v) : a[k] = [v]), a), {}))

reduce iterates through each object, maintaining previous values in a.

Object.entries generates key-value pairs for each object in the array.

forEach loops over each pair and appends the values to the accumulator a.

The one-liner broken down into separate lines:

var obj = [
  {"name1": "value11", "name2":"value21", "name3": "value31"},
  {"name1": "value12", "name2":"value22", "name3": "value32"},
  {"name1": "value13", "name2":"value23", "name3": "value33"}
]

console.log(
  obj.reduce((a, o) => (
    Object.entries(o).forEach(([k,v]) => 
      a[k] ? a[k].push(v) : a[k] = [v]
    ), a
  ), {})
)

Answer 5

Answer №3

Transform the data into an object by iterating through each key-value pair of the array item using Object.entries, ensuring an array is created at the key in the accumulator if needed, and then appending to that array:

var myData = [
  {"key1": "value11", "key2":"value21", "key3": "value31"},
  {"key1": "value12", "key2":"value22", "key3": "value32"},
  {"key1": "value13", "key2":"value23", "key3": "value33"}
];

const result = myData.reduce((accumulator, object) => {
  Object.entries(object).forEach(([key, value]) => {
    if (!accumulator[key]) {
      accumulator[key] = [];
    }
    accumulator[key].push(value);
  });
  return accumulator;
}, {});
console.log(result);

Answer 6

Transform the data into an object by iterating through each key-value pair of the array item using Object.entries, ensuring an array is created at the key in the accumulator if needed, and then appending to that array:

var myData = [
  {"key1": "value11", "key2":"value21", "key3": "value31"},
  {"key1": "value12", "key2":"value22", "key3": "value32"},
  {"key1": "value13", "key2":"value23", "key3": "value33"}
];

const result = myData.reduce((accumulator, object) => {
  Object.entries(object).forEach(([key, value]) => {
    if (!accumulator[key]) {
      accumulator[key] = [];
    }
    accumulator[key].push(value);
  });
  return accumulator;
}, {});
console.log(result);

Generate arrays with custom names by parsing JSON data

Answer №1

Answer №2

Answer №3

Similar questions

Optimal Timing for Loading Initial State from Database Using Vuex

Decoding deeply nested JSON arrays in Swift

"Exploring the world of Vue.js and videojs: refreshing the video

Using a Python variable to add a column to a MySQL table after receiving an API response

Retrieving information from React elements

Exploring the process of setting up Jasmine tests for both services and controllers in Angular.js

The Angular binding for loading does not correctly reflect changes in the HTML

What is the best way to swap out an icon based on the chosen option?

Error Encountered: Unhandled Runtime Error in Next.js with Firebase - TypeError: Unable to access the property 'initializeApp' as it is undefined

Issue with accessing Contacts API functionality in Firefox OS application

What is the best way to incorporate a gratitude note into a Modal Form while ensuring it is responsive?

Using Polymer to automatically update the DOM when a JSON file is modified

What is the process for verifying and authenticating a token's header?

Extracting Data from JSON Structures

Error message: Object literal is limited to declaring existing properties

How to Unravel a JSON Document Using Pandas

Utilizing API pointers in JSON PHP programming

What are some ways to disguise websockets?

The HTML Bootstrap collapse feature is not functioning correctly upon the initial button press

How can I tally the frequency of characters in a given string using Javascript and output them as numerical values?