Блог

Главная - Вопросы по программированию - JavaScript Как получить значения из массива объектов в массив массивов, чтобы каждый подмассив группировал значения из похожих ключей?

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

#javascript #arrays #object

#javascript #массивы #объект

Вопрос:

У меня есть массив объектов, основанный на пользовательском вводе, например:

 const sortedByDate = [
  { Date: '2020-05-03', Genre: 'History', PageViews: '34' },
  { Date: '2010-01-16', Genre: 'History', PageViews: '10' },
  { Date: '1975-04-23', Genre: 'Literature', PageViews: '27' },
  { Date: '1997-10-14', Genre: 'History', PageViews: '3' },
  { Date: '1990-08-22', Genre: 'Literature', PageViews: '42' },
  { Date: '2001-06-13', Genre: 'Literature', PageViews: '64' }
]

Как я могу получить значения просмотра страниц в массив массивов таким образом, чтобы каждый подмассив представлял один жанр? Например:

 const chartData = [
  [ 34, 10, 3 ],  // These are the PageView values from the Genre 'History'
 [ 27, 42, 64 ]  // These are the PageView values from the Genre 'Literature'
]

Приведенный выше массив sortedByDate будет иметь произвольное количество элементов на основе пользовательского ввода, а массив chartData должен иметь произвольное количество подмассивов на основе количества «жанров»

Ответ №1:

Ожидаемый результат может быть достигнут за счет использования Array.reduce и Object.values 

 const sortedByDate = [
  { Date: '2020-05-03', Genre: 'History', PageViews: '34' },
  { Date: '2010-01-16', Genre: 'History', PageViews: '10' },
  { Date: '1975-04-23', Genre: 'Literature', PageViews: '27' },
  { Date: '1997-10-14', Genre: 'History', PageViews: '3' },
  { Date: '1990-08-22', Genre: 'Literature', PageViews: '42' },
  { Date: '2001-06-13', Genre: 'Literature', PageViews: '64' }
]

const getFormattedData = (data) => {
  const finalRes = data.reduce((res, {
    Genre,
    PageViews
  }) => {
    if (res[Genre]) {
      res[Genre].push(PageViews)
    } else {
      res[Genre] = [PageViews]
    }
    return res;
  }, {});

  return Object.values(finalRes);
}

console.log(getFormattedData(sortedByDate))  
 .as-console-wrapper {
  max-height: 100% !important;
}

Ответ №2:

Вы можете уменьшить массив объектов до объекта массивов, используя Genre свойство в качестве ключа. Преобразуйте объект в массив с помощью Object.values() :

 const sortedByDate = [{"Date":"2020-05-03","Genre":"History","PageViews":"34"},{"Date":"2010-01-16","Genre":"History","PageViews":"10"},{"Date":"1975-04-23","Genre":"Literature","PageViews":"27"},{"Date":"1997-10-14","Genre":"History","PageViews":"3"},{"Date":"1990-08-22","Genre":"Literature","PageViews":"42"},{"Date":"2001-06-13","Genre":"Literature","PageViews":"64"}]

const fn = (data) => Object.values( // convert to an array of arrays
    data.reduce((r, { Genre, PageViews }) => {
      r[Genre] = r[Genre] || [] // create key by Genre if doesn't exist
      r[Genre].push(PageViews) // push to Genre key array

      return r;
    }, {})
  );

const result = fn(sortedByDate)

console.log(result)  
 .as-console-wrapper { max-height: 100% !important; }