Я возвращаю данные с моего PHP, используя такой запрос:
SELECT objective,signal_type,signal_name FROM signals WHERE channel="Email"
Данные возвращаются следующим образом:
[ { "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" } ]
Я могу добавить все это в таблицу так:
$.each(data, function(index, key) { $('#myTable').append('<tr><td>'+key.objective+'</td><td>'+key.signal_type+'</td><td>'+key.signal_name+'</td></tr>'); });
Это дает совершенно точную таблицу, но не привлекательную таблицу. Я получаю что-то вроде этого:
| 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 |
(Обратите внимание, что заголовок «жестко закодирован» в моем HTML)
То, что мне идеально хотелось бы, это что-то вроде этого:
| 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 |
Разница здесь в том, что в столбцах есть разные значения, основанные на столбце раньше. Любые мысли о том, как добраться до этого выхода? Обратите внимание, что я могу настроить свой SQL-запрос или свой javascript / jquery (или оба) в зависимости от того, что наиболее эффективно.
Проверьте, используется ли это значение раньше. Если это так, напечатайте пустую строку, если не напечатайте новое значение.
Это переводит на ваш добавочный код:
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('<tr><td>'+print_1+'</td><td>'+print_2+'</td><td>'+key.signal_name+'</td></tr>'); });