生成包含值及其兄弟和父值的HTML表行

Question

我有一个表示一组段的JSON对象,我想创建一个HTML表,按以下格式比较每个段:

-------------------------------------------------------------------------------
domain group  |    vertical  |       measure       |  Segment 1  |  Segment 2
-------------------------------------------------------------------------------
group 1       |      all     |     users clicking  |        340  |       340
              |              |    % users opening  |        10%  |       10%
               ----------------------------------------------------------------
              |     cars     |     users clicking  |        340  |       340
              |              |    % users opening  |        10%  |       10%
-------------------------------------------------------------------------------
group 2       |      all     |     users clicking  |        340  |       340
              |              |    % users opening  |        10%  |       10%
               ----------------------------------------------------------------
              |     cars     |     users clicking  |        340  |       340
              |              |    % users opening  |        10%  |       10%
-------------------------------------------------------------------------------

如何为每个将显示值的度量的段值创建一行,然后按垂直方式然后按域组进行分组？

JSON:

{
  "set": [
    {
      "id": 1,
      "segment_desc": "Segment 1",
      "segment_summary": [
        {
          "section_type": "domain group",
          "section_value": "group 1",
          "children": [
            {
              "children": [
                {
                  "format": "float",
                  "measure": "users clicking",
                  "value": 340
                },
                {
                  "format": "float",
                  "measure": "% users opening",
                  "value": 10
                }
              ],
              "section_type": "vertical",
              "section_value": "all"
            },
            {
              "children": [
                {
                  "format": "float",
                  "measure": "users clicking",
                  "value": 340
                },
                {
                  "format": "float",
                  "measure": "% users opening",
                  "value": 10
                }
              ],
              "section_type": "vertical",
              "section_value": "cars"
            }
          ]
        }
      ]
    },
    {
      "id": 2,
      "segment_desc": "Segment 2",
      "segment_summary": [
        {
          "section_type": "domain group",
          "section_value": "group 2",
          "children": [
            {
              "children": [
                {
                  "format": "float",
                  "measure": "users clicking",
                  "value": 340
                },
                {
                  "format": "float",
                  "measure": "% users opening",
                  "value": 1.24
                }
              ],
              "section_type": "vertical",
              "section_value": "all"
            },
            {
              "children": [
                {
                  "format": "float",
                  "measure": "users clicking",
                  "value": 340
                },
                {
                  "format": "float",
                  "measure": "% users opening",
                  "value": 10
                }
              ],
              "section_type": "vertical",
              "section_value": "cars"
            }
          ]
        }
      ]
    }
  ]
}

编辑:上述表格布局的一个可接受的替代方案是为每个比较的段值打印一行,而不按域组和垂直分组:

    domain group | vertical      |    measure          | segment 1 | segment 2
  -------------------------------------------------------------------------------
    group 1      | all           |    users clicking   | 340       | 340
  -------------------------------------------------------------------------------
    group 1      | all           |    % users opening  | 10%       | 10%
  -------------------------------------------------------------------------------
    group 1      | cars          |    users clicking   | 340       | 340
  -------------------------------------------------------------------------------
    group 1      | cars          |    % users opening  | 10%       | 10%
  -------------------------------------------------------------------------------
    group 2      | all           |    users clicking   | 340       | 340

我安装了jQuery和lodash库,可以使用任何一个库.

Answer 1

试试这个（模式）

html

<table>
    <th>Groups</th>
    <tr class="group-1">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="group-1">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="group-2">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr class="group-2">
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

js

   // json, i.e.g., `{ "groups" : [{..}] }`
   var Groups = {
        "groups": [{
            "group": {
                "id": 1,
                "description" : "clicks",
                    "all": [{
                    "segment": 10
                }, {
                    "segment": 20
                }],
                    "cars": [{
                    "segment": 30
                }, {
                    "segment": 40
                }]
            }
        }, {
            "group": {
                "id": 2,
                "description" : "clicks",
                    "all": [{
                    "segment": 50
                }, {
                    "segment": 60
                }],
                    "cars": [{
                    "segment": 70
                }, {
                    "segment": 80
                }]
            }
        }]
    };

        $.each(Groups, function (key, value) {
            var g1all = $("tr.group-1:eq(0) > td");
            var g1cars = $("tr.group-1:eq(1) > td");
            var g2all = $("tr.group-2:eq(0) > td");
            var g2cars = $("tr.group-2:eq(1) > td");
            $(g1all).eq(0).html("Group: " + value[0].group.id);
            $(g1all).eq(1).html("Vertical: " 
              + ("all" in value[0].group ? "All" : "error") 
              +" Measure: "+ value[0].group.description);
            $(g1all).eq(2).html("Segment 1:  " + value[0].group.all[0].segment);
            $(g1all).eq(3).html(" Segment 2: " + value[0].group.all[1].segment);
            $(g1cars).eq(0).html("Group: " + value[0].group.id);
            $(g1cars).eq(1).html("Vertical: " 
              + ("cars" in value[0].group ? "Cars" : "error") 
              +" Measure: "+ value[0].group.description);
            $(g1cars).eq(2).html("Segment 1:  " + value[0].group.cars[0].segment);
            $(g1cars).eq(3).html(" Segment 2: " + value[0].group.cars[1].segment);

            $(g2all).eq(0).html("Group: " + value[1].group.id);
            $(g2all).eq(1).html("Vertical: " 
              + ("all" in value[1].group ? "All" : "error")  
              +" Measure: "+ value[1].group.description);
            $(g2all).eq(2).html("Segment 1:  " + value[1].group.all[0].segment);
            $(g2all).eq(3).html(" Segment 2: " + value[1].group.all[1].segment);
            $(g2cars).eq(0).html("Group: " + value[1].group.id);
            $(g2cars).eq(1).html("Vertical: " 
              + ("cars" in value[1].group ? "Cars" : "error")  
              +" Measure: "+ value[1].group.description);
            $(g2cars).eq(2).html("Segment 1:  " + value[1].group.cars[0].segment);
            $(g2cars).eq(3).html(" Segment 2: " + value[1].group.cars[1].segment);

        })
    })

jsfiddle