Dynamic swapping of key/values in a Javascript object

Question

I'm about to show the data I aggregated from the database in a grouped histogram.

The data looks like this:

[
  {
    "_id": "Gas Separator Filter",
    "sellingPrice": 100000,
    "quantity": 10
  },
  {
    "_id": "Dry Gas Cartridge",
    "sellingPrice": 6005000,
    "quantity": 15
  }
]

But in order to show it in the chart and for them to be grouped, I need something like this. For each _id in the dataset above I should be able to see two bars in the chart.

[
  {
    "name": "quantity",
    "Gas Separator Filter": 10,
    "Dry Gas Cartridge": 15
  },
  {
    "name": "sellingPrice",
    "Gas Separator Filter": 100000,
    "Dry Gas Cartridge": 6005000
  }
]

It's been two hours and I'm not able to think of a good way to do this. What will you suggest?

@HarisBouchlis basically each _id is the name of a filter type, in order to group them in the chart and show sellingPrice and quantity as two bars for each filtertype name, I have to tell the chart that I only have two bars (two values) representing each object in the second array. Then I will give the chart the name of each filtertype. — mamsoudi
– mamsoudi, Commented Feb 21, 2019 at 16:37

mamsoudi · Accepted Answer · 2019-02-23 12:18:11Z

2

Here is one solution using old school for loops :)

const transform = (data, nameValues, keyProp) => {
    const result = [];

	for (const name of nameValues) {
		const output = { name };

		for (const value of data) {
			output[value[keyProp]] = value[name];
		}
		result.push(output);
	}

	return result;
};

const result = transform(
    [
        {
            "_id": "Gas Separator Filter",
            "sellingPrice": 100000,
            "quantity": 10
        },
        {
            "_id": "Dry Gas Cartridge",
            "sellingPrice": 6005000,
            "quantity": 15
        }
    ],
    ["sellingPrice", "quantity"],
    "_id"
);

console.log(result);

edited Feb 23, 2019 at 12:18

mamsoudi

4,0591 gold badge17 silver badges24 bronze badges

answered Feb 22, 2019 at 1:21

Soroush Saffari

1991 silver badge8 bronze badges

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

Comments

MatteoPHRE · Accepted Answer · 2019-02-21 17:13:42Z

2

You can use array.reduce to achieve this:

const arrayToArray = (array) => {
 var ret = [{
         "name": "price"
     }, {
         "name": "quantity"
     }
 ];
 return array.reduce((obj, item, idx, original) => {
     ret[0][item._id] = original[idx].sellingPrice;
     ret[1][item._id] = original[idx].quantity;
     return ret;
 }, 0)
}

Like this you set a variable with the base object that you fullfill with couple _id:value for price and quantity. But is not an "elegant" way to do this. Are you sure you need this objects array structure to show the chart?

answered Feb 21, 2019 at 17:13

MatteoPHRE

3894 silver badges12 bronze badges

1 Comment

jvk Over a year ago

FYI, this should be dynamically produced

Taki · Accepted Answer · 2019-02-21 18:57:33Z

I find it hard to explain my solution but here's my take on it (you can add console.logs for different variables to follow the transformation ):

extract all the keys in the object, loop through them, the name would be that key, and use a nested loop to set the other keys and values :

const data = [ { "_id": "Gas Separator Filter", "sellingPrice": 100000, "quantity": 10 }, { "_id": "Dry Gas Cartridge", "sellingPrice": 6005000, "quantity": 15 } ]

const [_id, ...keys] = [...new Set(data.map(e => Object.keys(e)).flat())]

// console.log(keys) : ["sellingPrice", "quantity"]

const result = keys.map(key => {
  const values = data.map(obj => ({
    [obj._id]: obj[key]
  }))

  return Object.assign({
    name: key
  }, ...values);
})

console.log(result)

Collectives™ on Stack Overflow

Dynamic swapping of key/values in a Javascript object

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related