Динамическая установка ключа объекта в javascript

У меня есть такой объект:

let inputData = {
  "dimensions": [
    {
      "id": "dimension_re",
      "label": "Region",
      "values": ["East", "East", "West", "SouthWest", "South","NorthEast"]
    }, 
    {
      "id": "dimension_cnt",
      "label": "County",
      "values": ["London", "Italy", "Germany", "US", "Russia","India"]
    },
    {
      "id": "measure_sales",
      "label": "Sales",
      "values": [100, 156, 432, 462, 25,100]
    }, 
    {
      "id": "measure_qty",
      "label": "Quantity",
      "values": [85, 34, 153, 434, 52, 43]
    }, 
    {
      "id": "measure_profit",
      "label": "Profit",
      "values": [123, 45, 421, 465, 451, 56]
    }
  ]
}

Мой ожидаемый результат:

let expectdData = [
  {
    "Region": "East",
    "County": "London",
    "Sales": 100,
    "Quantity": 85,
    "Profit": 123
  }, 
  {
    "Region": "East",
    "County": "Italy",
    "Sales": 156,
    "Quantity": 34,
    "Profit": 45
  }, 
  {
    "Region": "West",
    "County": "Germany",
    "Sales": 432,
    "Quantity": 153,
    "Profit": 421
  }, 
  {
    "Region": "SouthWest",
    "County": "US",
    "Sales": 462,
    "Quantity": 434,
    "Profit": 465
  }, 
  {
    "Region": "South",
    "County": "Russia",
    "Sales": 25,
    "Quantity": 52,
    "Profit": 451
  },
  {
    "Region": "NorthEast",
    "County": "India",
    "Sales": 100,
    "Quantity": 43,
    "Profit": 56
  }
]

Вот моя программа для получения этих ожидаемых данных:

let actualData = [];

inputData.dimensions.forEach((e,i) => {
  let tempVal = e.label;
  e.values.forEach((elem,index) => {
    actualData[index] = new Object({
      [tempVal] : elem
    });
  })
});

console.log(actualData);

Но, к сожалению, я получаю только последний элемент для каждого объекта. В моей консоли это выглядит так:

[
  { Profit: 123 },
  { Profit: 45 },
  { Profit: 421 },
  { Profit: 465 },
  { Profit: 451 },
  { Profit: 56 }
]

Я думаю, что в каждой итерации он просто переопределяет переменную «tempVal». Как предотвратить это и как я могу получить ожидаемый массив объектов?

javascript

10.04.2022 08:26

Формы c голосовым вводом в React с помощью Speechly

Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...

В чем разница между Promise и Observable?

Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.

Сравнение структур данных: Массивы и объекты в Javascript

Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...

Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели

Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...

Приложение для отслеживания бюджета на React js для начинающих

Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...

Стоит ли использовать React в 2022 году?

В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

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

let actualData = [];

inputData.dimensions.forEach((e,i)=>{
  let tempVal = e.label;
  e.values.forEach((elem,index) => {
    if (!actualData[index]) {
      actualData[index] = {}
    }
    actualData[index][tempVal] = elem
  })
});

console.log(actualData);

10.04.2022 08:37

Используя Array#reduce, выполните итерацию по dimension при обновлении списка полученных объектов.
В каждой итерации используйте Array#forEach для перебора текущего списка values и обновления объекта в каждом индексе с помощью label в качестве ключа и текущего value в качестве значения.

const inputData = {
  "dimensions": [
    {
      "id": "dimension_re",
      "label": "Region",
      "values": ["East", "East", "West", "SouthWest", "South","NorthEast"]
    }, 
    {
      "id": "dimension_cnt",
      "label": "County",
      "values": ["London", "Italy", "Germany", "US", "Russia","India"]
    },
    {
      "id": "measure_sales",
      "label": "Sales",
      "values": [100, 156, 432, 462, 25,100]
    }, 
    {
      "id": "measure_qty",
      "label": "Quantity",
      "values": [85, 34, 153, 434, 52, 43]
    }, 
    {
      "id": "measure_profit",
      "label": "Profit",
      "values": [123, 45, 421, 465, 451, 56]
    }
  ]
};

const res = inputData.dimensions.reduce((acc, { label, values = [] }) => {
  values.forEach((value, index) => {
    acc[index] = { ...(acc[index] ?? {}), [label]: value };
  });
  return acc;
}, []);

console.log(res);

Большой ! На самом деле я не очень хорошо знал метод сокращения, но ваш ответ дает мне четкое представление об этом. благодарю вас

— 10.04.2022 08:45

10.04.2022 08:38

Поскольку ваш index исходит из внутреннего цикла, вы будете заменять значения в actualData[index] на каждой итерации внешнего цикла, поэтому вы получите только последнюю.

Вместо этого попробуйте эту операцию уменьшать...

const inputData = {"dimensions":[{"id":"dimension_re","label":"Region","values":["East","East","West","SouthWest","South","NorthEast"]},{"id":"dimension_cnt","label":"County","values":["London","Italy","Germany","US","Russia","India"]},{"id":"measure_sales","label":"Sales","values":[100,156,432,462,25,100]},{"id":"measure_qty","label":"Quantity","values":[85,34,153,434,52,43]},{"id":"measure_profit","label":"Profit","values":[123,45,421,465,451,56]}]};

// Find the max number of `values`
const maxLength = Math.max(...inputData.dimensions.map(({ values }) => values.length));

const actualData = inputData.dimensions.reduce(
  (arr, { label, values }) =>
    arr.map((obj, i) => ({ ...obj, [label]: values[i] })),
  Array.from(
    {
      length: maxLength,
    },
    () => ({}) // creates an array of empty objects
  )
);
  
console.log(actualData);

.as-console-wrapper { max-height: 100% !important; }

10.04.2022 08:38

Другие вопросы по теме

Переполнение текста из тега div

Как написать регулярное выражение, соответствующее word_char, но только ноль или одно подчеркивание

Я хочу, чтобы флажок управлял всеми кнопками переключения

Как использовать это в бэкенде (Node Js)

Регулярное выражение для соответствия якорному тексту, но не <ссылке href

Почему моя страница не обновляется при добавлении элемента в мой массив при использовании React

Оставайтесь на странице React после HTTP-запроса к Flask

React useEffects с setData не попадает в бесконечный цикл?

Объединить значения свойств каждого объекта массива javascript, свойства представляют собой список строк в javascript

Как работает ссылка ProcessingJS без подключения к Интернету?

Динамическая установка ключа объекта в javascript

Ответы 3

Другие вопросы по теме

Похожие вопросы