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

I'm looking for a query that allows a user to select random rows from a database just once

What is the significance of the A tag when parsing a URL?

Error occurred during JSON parsing: String in the JSON object is not properly terminated

The form I created retrieves select options via an ajax call, but after saving, the post values are not displaying as expected

Working with conditional rendering in React Native allows us to easily change text based on different conditions. By utilizing

Utilizing UTC Time with AngularUI's UI-Date Datepicker

Exploring the process of incorporating a JavaScript library into an Angular project

What does the file_get_contents('php://input') contain when used with an HTML form submission?

What is the recommended ORM for implementing transactions in Node.js when working with MariaDB?

Received an unexpected character '?' in NextJS

Utilizing D3's nested selection with JSON: Implementing .force() on nested elements

Angular 2: Emptying input field value on click event

Having trouble with the input range slider on Chrome? No worries, it's working perfectly fine

Modules failing to load in the System JS framework

Adjust the CSS property of a div to have a fixed position when scrolling

Swap out a div identifier and reload the page without a full page refresh

13 Helpful Tips for Resolving Hydration Failure Due to Discrepancy in Custom Dropdown Display between Server and UI

Bringing in a JSON file containing dictionaries of dictionaries with nested dictionaries into Pandas

Mastering regular expressions in TypeScript

Tips for efficiently storing a large JSON object in a session storage?