title: javascript array mix by two keys
body: <p>I have the following array of 3 (or more) different types and groups:
  Lets say colors and shapes, I want to spread that item as much as possible (not random)</p>
  
  <pre><code>['blue', 'green', 'red']
  ['circle', 'rect', 'tri']
  </code></pre>
  
  <p>they are organized in an array</p>
  
  <pre><code>[
    {type: 'blue', group: 'circle'}, {type: 'blue', group: 'rect'}, {type: 'blue',group: 'tri'},
    {type: 'green', group: 'circle'}, {type: 'green', group: 'rect'},
    {type: 'red', group: 'circle'}, {type: 'red', group: 'rect'}, {type: 'red',group: 'tri'},
  ]
  </code></pre>
  
  <p>I'm trying to sort it in a way that two different groups or types won't follow each other and also the group will follow (circle,rect,tri):</p>
  
  <pre><code>[
    {type: 'blue', group: 'circle'}, {type: 'green', group: 'rect'}, {type: 'red',group: 'tri'},
    {type: 'green', group: 'circle'}, {type: 'red', group: 'rect'}, {type: 'blue',group: 'tri'},
    {type: 'red', group: 'circle'}, {type: 'blue', group: 'rect'},
  ]
  </code></pre>
  
  <p>I was tying to go with several different ways, mapping the groups then types, mapping types then groups.</p>
  
  <p>The idea is to be able to display it on screen (react) as there won't be two type / groups one next to the other.</p>