title: Transform array of objects to a different array of objects - Javascript/Angular
body: <p>I have an array of object that looks like this. I made it look that way using .groupBy with lodash.</p>
  
  <p>States.ts</p>
  
  <pre><code>STATES: Object[] = [
    {
      USA: [
        {
          name: 'Alabama',
          abbreviation: 'AL',
          country: 'USA'
        },
        {
          name: 'Alaska',
          abbreviation: 'AK',
          country: 'USA'
        }
      ]
    },
    {
      Canada: [
        {
          name: 'Alberta',
          abbreviation: 'ALB',
          country: 'Canada'
        }
      ]
    }
  ];
  </code></pre>
  
  <p>I need it to look like this:</p>
  
  <pre><code>    stateList:StateDropdownItem[] =[ 
      {
         label: 'USA', 
         items: [
                 {label: 'AL', value: 'Alabama'},
                 {label: 'AK', value: 'Alaska'},
         ]
      },
      .
      .
     ]
  </code></pre>
  
  <p>I have tried the code below, but it doesn't work. When I print it to the console appears <code>undefiened</code> even if I try to put an element without the forloop I get the following error <code>Cannot read property 'push' of undefined</code></p>
  
  <p><strong>TS</strong></p>
  
  <pre><code>dropdownOfStates: StateDropdownItem[];
  .
  .
  dropdownBuilder() {
      const STATES_BY_COUNTRY = this.getStatesByCountry();
      let tempItem;
      for (let i = 0; i &lt; STATES_BY_COUNTRY.length; i++) {
        tempItem = STATES_BY_COUNTRY[i];
        this.dropdownOfStates.push(
          new StateDropdownItem('KEY COUNTRY VALUE HERE', [
            tempItem.abbreviation,
            tempItem.name
          ])
        );
      }
    }
  </code></pre>
  
  <p>Console.log after printing the result of using .groupBy with lodash
  <a href="https://i.stack.imgur.com/L2hsv.png" rel="noreferrer">groupby objects by country</a></p>