title: Iterate and get unique values from JSON for some indexes
body: <p>I'm getting data back from my PHP using a query like this:</p>
  
  <p><code>SELECT objective,signal_type,signal_name FROM signals WHERE channel="Email"</code></p>
  
  <p>The data comes back like this:</p>
  
  <pre><code>[
      {
          "objective": "Awareness",
          "signal_type": "Efficiency",
          "signal_name": "CPM"
      },
      {
          "objective": "Awareness",
          "signal_type": "Quality",
          "signal_name": "Click-thru Rate"
      },
      {
          "objective": "Awareness",
          "signal_type": "Quality",
          "signal_name": "Frequency"
      },
      {
          "objective": "Awareness",
          "signal_type": "Quality",
          "signal_name": "Interaction Rate"
      },
      {
          "objective": "Awareness",
          "signal_type": "Quality",
          "signal_name": "Viewability"
      },
      {
          "objective": "Awareness",
          "signal_type": "Volume",
          "signal_name": "Display Time"
      },
      {
          "objective": "Awareness",
          "signal_type": "Volume",
          "signal_name": "Impression"
      },
      {
          "objective": "Awareness",
          "signal_type": "Volume",
          "signal_name": "Reach"
      },
      {
          "objective": "Conversion",
          "signal_type": "Efficiency",
          "signal_name": "Cost per Action"
      },
      {
          "objective": "Conversion",
          "signal_type": "Efficiency",
          "signal_name": "ROI/ROAS"
      },
      {
          "objective": "Conversion",
          "signal_type": "Quality",
          "signal_name": "Avg Order Value"
      },
      {
          "objective": "Conversion",
          "signal_type": "Volume",
          "signal_name": "Conversion"
      },
      {
          "objective": "Conversion",
          "signal_type": "Volume",
          "signal_name": "Revenue"
      },
      {
          "objective": "Engagement",
          "signal_type": "Efficiency",
          "signal_name": "Cost per Click"
      },
      {
          "objective": "Engagement",
          "signal_type": "Quality",
          "signal_name": "Avg Interaction Time"
      },
      {
          "objective": "Engagement",
          "signal_type": "Quality",
          "signal_name": "Conversion Rate"
      },
      {
          "objective": "Engagement",
          "signal_type": "Volume",
          "signal_name": "Click"
      },
      {
          "objective": "Engagement",
          "signal_type": "Volume",
          "signal_name": "Interaction"
      },
      {
          "objective": "Engagement",
          "signal_type": "Volume",
          "signal_name": "Interaction Time"
      }
  ]
  </code></pre>
  
  <p>I can append this all to a table like so:</p>
  
  <pre><code>$.each(data, function(index, key) {
   $('#myTable').append('&lt;tr&gt;&lt;td&gt;'+key.objective+'&lt;/td&gt;&lt;td&gt;'+key.signal_type+'&lt;/td&gt;&lt;td&gt;'+key.signal_name+'&lt;/td&gt;&lt;/tr&gt;');
                  });
  </code></pre>
  
  <p>This yields a perfectly accurate table, but not an eye-pleasing table. I get something like this:</p>
  
  <pre><code>| Signal Type | Signal Types | Available Signals    |
  |-------------|--------------|----------------------|
  | Awareness   | Efficiency   | CPM                  |
  | Awareness   | Quality      | Click-thru Rate      |
  | Awareness   | Quality      | Frequency            |
  | Awareness   | Quality      | Interaction Rate     |
  | Awareness   | Quality      | Viewability          |
  | Awareness   | Volume       | Display Time         |
  | Awareness   | Volume       | Impression           |
  | Awareness   | Volume       | Reach                |
  | Conversion  | Efficiency   | Cost per Action      |
  | Conversion  | Efficiency   | ROI/ROAS             |
  | Conversion  | Quality      | Avg Order Value      |
  | Conversion  | Volume       | Conversion           |
  | Conversion  | Volume       | Revenue              |
  | Engagement  | Efficiency   | Cost per Click       |
  | Engagement  | Quality      | Avg Interaction Time |
  | Engagement  | Quality      | Conversion Rate      |
  | Engagement  | Volume       | Click                |
  | Engagement  | Volume       | Interaction          |
  | Engagement  | Volume       | Interaction Time     |
  </code></pre>
  
  <p>(Note that the header is "hard coded" in my HTML)</p>
  
  <p>What I'd ideally like to have is something like this:</p>
  
  <pre><code>| Signal Type | Signal Types | Available Signals    |
  |-------------|--------------|----------------------|
  | Awareness   | Efficiency   | CPM                  |
  |             | Quality      | Click-thru Rate      |
  |             |              | Frequency            |
  |             |              | Interaction Rate     |
  |             |              | Viewability          |
  |             | Volume       | Display Time         |
  |             |              | Impression           |
  |             |              | Reach                |
  | Conversion  | Efficiency   | Cost per Action      |
  |             |              | ROI/ROAS             |
  |             | Quality      | Avg Order Value      |
  |             | Volume       | Conversion           |
  |             |              | Revenue              |
  | Engagement  | Efficiency   | Cost per Click       |
  |             | Quality      | Avg Interaction Time |
  |             |              | Conversion Rate      |
  |             | Volume       | Click                |
  |             |              | Interaction          |
  |             |              | Interaction Time     |
  </code></pre>
  
  <p>The difference here is that there are distinct values in the columns based on the column before. Any thoughts on how to get to this output? Note that I'm able to adjust my SQL query or my javascript/jquery (or both) depending on what's most efficient. </p>