Iterate e obtenha valores exclusivos da JSON para alguns índices

Estou recebendo dados de volta do meu PHP usando uma consulta como esta:

SELECT objective,signal_type,signal_name FROM signals WHERE channel="Email"

Os dados retornam assim:

 [ { "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" } ] 

Eu posso acrescentar isso tudo a uma tabela assim:

 $.each(data, function(index, key) { $('#myTable').append(''+key.objective+''+key.signal_type+''+key.signal_name+''); }); 

Isso produz uma tabela perfeitamente precisa, mas não uma mesa agradável para os olhos. Recebo algo como isto:

 | 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 | 

(Observe que o header é “codificado” no meu HTML)

O que eu gostaria idealmente era algo assim:

 | 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 | 

A diferença aqui é que existem valores distintos nas colunas com base na coluna anterior. Alguma opinião sobre como chegar a esse resultado? Tenho em atenção que posso ajustar a minha consulta SQL ou o meu javascript / jquery (ou ambos), dependendo do que é mais eficiente.

Verifique se o valor é usado antes. Se assim for, imprima uma string em branco, se não imprimir o novo valor.

Isso se traduz em seu código adicional:

 storedObjective = ""; storedSignal_type = ""; $.each(data, function(index, key) { if (key.objective == storedObjective) { print_1 = ""; } else { print_1 = objective; storedObjective = key.objective; } if (key.signal_type == storedSignal_type) { print_2 = ""; } else { print_2 = key.signal_type; storedSignal_type = key.signal_type; } $('#myTable').append(''+print_1+''+print_2+''+key.signal_name+''); });