Динамическая замена ключа / значений в объекте Javascript

Question

Я собираюсь показать данные, которые я агрегировал из базы данных в сгруппированной гистограмме.

Данные выглядят так:

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

Но для того, чтобы показать их вдиаграммы и чтобы они были сгруппированы, мне нужно что-то вроде этого.Для каждого _id в наборе данных выше я должен видеть два столбца на графике.

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

Прошло два часа, и я не могу придумать, как это сделать.Что вы предложите?

Answer 1

Мне сложно объяснить моё решение, но вот мое решение (вы можете добавить console.log s для различных переменных, чтобы следовать преобразованию):

извлечь все ключи в объекте, пройти по циклуих, name будет этим ключом, и использовать вложенный цикл для установки других ключей и значений:

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)

Answer 2

Вот одно решение с использованием старой школы для циклов:)

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);

Answer 3

Вы можете использовать array.reduce для достижения этого:

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)
}

Таким образом, вы устанавливаете переменную с базовым объектом, который вы заполняете с помощью пары _id: value для цены и количества.Но это не «элегантный» способ сделать это.Вы уверены, что вам нужна эта структура массива объектов для отображения диаграммы?