Преобразование массива объектов в другой массив объектов - Javascript / Angular - PullRequest
Новая
       5

Преобразование массива объектов в другой массив объектов - Javascript / Angular

0 голосов
/ 25 августа 2018

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

States.ts 

STATES: Object[] = [
  {
    USA: [
      {
        name: 'Alabama',
        abbreviation: 'AL',
        country: 'USA'
      },
      {
        name: 'Alaska',
        abbreviation: 'AK',
        country: 'USA'
      }
    ]
  },
  {
    Canada: [
      {
        name: 'Alberta',
        abbreviation: 'ALB',
        country: 'Canada'
      }
    ]
  }
];

Мне нужно, чтобы это выглядело так: 

    stateList:StateDropdownItem[] =[ 
    {
       label: 'USA', 
       items: [
               {label: 'AL', value: 'Alabama'},
               {label: 'AK', value: 'Alaska'},
       ]
    },
    .
    .
   ]

Я пыталсякод ниже, но это не работает.Когда я печатаю его на консоли, появляется undefiened, даже если я пытаюсь поместить элемент без forloop, я получаю следующую ошибку Cannot read property 'push' of undefined

TS 

dropdownOfStates: StateDropdownItem[];
.
.
dropdownBuilder() {
    const STATES_BY_COUNTRY = this.getStatesByCountry();
    let tempItem;
    for (let i = 0; i < STATES_BY_COUNTRY.length; i++) {
      tempItem = STATES_BY_COUNTRY[i];
      this.dropdownOfStates.push(
        new StateDropdownItem('KEY COUNTRY VALUE HERE', [
          tempItem.abbreviation,
          tempItem.name
        ])
      );
    }
  }

Console.log после печати результата использования .groupBy с lodash группировки объектов по стране

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

Вот несколько более краткий способ сделать это с ES6 и , уменьшить , Object.keys и map : 

var data = [ { USA: [ { name: 'Alabama', abbreviation: 'AL', country: 'USA' }, { name: 'Alaska', abbreviation: 'AK', country: 'USA' } ] }, { Canada: [ { name: 'Alberta', abbreviation: 'ALB', country: 'Canada' } ] } ];

const result = data.reduce((r,c) => Object.keys(c).map(x => r.push({ label: x, items: c[x].map(y => ({label: y.abbreviation, value: y.name }))})) && r, [])

console.log(result)

Это расширенный вариант: 

var data = [ { USA: [ { name: 'Alabama', abbreviation: 'AL', country: 'USA' }, { name: 'Alaska', abbreviation: 'AK', country: 'USA' } ] }, { Canada: [ { name: 'Alberta', abbreviation: 'ALB', country: 'Canada' } ] } ];

const result = data.reduce((r,c) => {
   Object.keys(c).map(x => {
     r.push({ label: x, items: c[x].map(y => ({label: y.abbreviation, value: y.name }))})})
	return r}, [])

console.log(result)
0 голосов
/ 25 августа 2018

Вы можете использовать функцию map массивов для преобразования их структуры.

Код ниже должен преобразовать его в структуру, которую вы хотите. Вы можете нажать «Выполнить фрагмент кода», чтобы увидеть вывод 

let states = [
  {
    USA: [
      {
        name: 'Alabama',
        abbreviation: 'AL',
        country: 'USA'
      },
      {
        name: 'Alaska',
        abbreviation: 'AK',
        country: 'USA'
      }
    ]
  },
  {
    Canada: [
      {
        name: 'Alberta',
        abbreviation: 'ALB',
        country: 'Canada'
      }
    ]
  }
];

// Use the code below to transform 

let res = states.map((val) => {
  let country = Object.keys(val)[0]; // Get the name of the country, e.g. USA
  return { // Return the new object structure
    label: country,
    items: val[country].map((item) => ({label: item.abbreviation, value: item.name}))
  }
});

// Log the value
console.log(res);
...