javascript - 迭代并从 JSON 获取某些索引的唯一值

Question

我正在使用如下查询从我的 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     |

(请注意， header 在我的 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(或两者)。

Answer 1

检查之前是否使用过该值。如果是，则打印一个空字符串，如果不是，则打印新值。

这将转化为您的附加代码:

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>');
});